<h1 id="%E3%81%93%E3%82%8C%E3%81%AF%E4%BD%95">
<a class="header-anchor-link" href="#%E3%81%93%E3%82%8C%E3%81%AF%E4%BD%95" aria-hidden="true"></a> これは何</h1>
<p>Auth0 のメールアドレス認証を用いたログインフロー(Authorization Code Flow)をシーケンス図で図示します。</p>
<h1 id="new-universal-login">
<a class="header-anchor-link" href="#new-universal-login" aria-hidden="true"></a> New Universal Login</h1>
<h2 id="auth0-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E3%81%AA%E3%81%84%E3%81%A8%E3%81%8D">
<a class="header-anchor-link" href="#auth0-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E3%81%AA%E3%81%84%E3%81%A8%E3%81%8D" aria-hidden="true"></a> Auth0 セッションがないとき</h2>
<span class="embed-block zenn-embedded zenn-embedded-mermaid"><iframe id="zenn-embedded__57a6c0a17e5fb" src="https://embed.zenn.studio/mermaid#zenn-embedded__57a6c0a17e5fb" data-content="sequenceDiagram%0A%20actor%20user%20as%20%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%0A%20participant%20auth0%20as%20auth0%0A%20participant%20app%20as%20%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%0A%20user%20-%3E%3E%20app%3A%20GET%20%E4%BB%BB%E6%84%8F%E3%81%AE%E8%AA%8D%E8%A8%BC%E5%BF%85%E9%A0%88%E3%83%9A%E3%83%BC%E3%82%B8%0A%20app%20--%3E%3E%20user%3A%20authorize%20request%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%20auth0%3A%20authorize%20request(GET%20authorize)%0A%20auth0%20--%3E%3E%20user%3A%20%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%20auth0%3A%20GET%20u%2Flogin%3Fstate%3Da%0A%20auth0%20--%3E%3E%20user%3A%20%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E8%BF%94%E3%81%99%0A%20user%20-%3E%3E%20auth0%3A%20%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%80%81%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E9%80%81%E4%BF%A1(POST%20u%2Flogin%3Fstate%3Da)%0A%20auth0%20--%3E%3E%20user%3A%20resume%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%20auth0%3A%20GET%20authorize%2Fresume%3Fstate%3Db%0A%20auth0%20--%3E%3E%20user%3A%20%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B3%E3%83%BC%E3%83%AB%E3%83%90%E3%83%83%E3%82%AF%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%2B%20app%3A%20GET%20auth0%2Fcallback%3Fcode%3Dhoge%0A%20app%20-%3E%3E%20auth0%3A%20POST%20oauth%2Ftoken%0A%20auth0%20--%3E%3E%20app%3A%20%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%80%81ID%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%0A%20app%20--%3E%3E-%20user%3A%20%E4%BB%BB%E6%84%8F%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%20app%3A%20GET%20%E4%BB%BB%E6%84%8F%E3%81%AE%E8%AA%8D%E8%A8%BC%E5%BF%85%E9%A0%88%E3%83%9A%E3%83%BC%E3%82%B8" frameborder="0" scrolling="no" loading="lazy"></iframe></span><h2 id="auth0-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E3%81%82%E3%82%8B%E3%81%A8%E3%81%8D">
<a class="header-anchor-link" href="#auth0-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E3%81%82%E3%82%8B%E3%81%A8%E3%81%8D" aria-hidden="true"></a> Auth0 セッションがあるとき</h2>
<span class="embed-block zenn-embedded zenn-embedded-mermaid"><iframe id="zenn-embedded__75feabb42bdf2" src="https://embed.zenn.studio/mermaid#zenn-embedded__75feabb42bdf2" data-content="sequenceDiagram%0A%20actor%20user%20as%20%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%0A%20participant%20auth0%20as%20auth0%0A%20participant%20app%20as%20%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%0A%20user%20-%3E%3E%20app%3A%20GET%20%E4%BB%BB%E6%84%8F%E3%81%AE%E8%AA%8D%E8%A8%BC%E5%BF%85%E9%A0%88%E3%83%9A%E3%83%BC%E3%82%B8%0A%20app%20--%3E%3E%20user%3A%20authorize%20request%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%20auth0%3A%20authorize%20request(GET%20authorize)%0A%20auth0%20--%3E%3E%20user%3A%20%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B3%E3%83%BC%E3%83%AB%E3%83%90%E3%83%83%E3%82%AF%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%2B%20app%3A%20GET%20auth0%2Fcallback%3Fcode%3Dhoge%0A%20app%20-%3E%3E%20auth0%3A%20POST%20oauth%2Ftoken%0A%20auth0%20--%3E%3E%20app%3A%20%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%80%81ID%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%0A%20app%20--%3E%3E-%20user%3A%20%E4%BB%BB%E6%84%8F%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%20app%3A%20GET%20%E4%BB%BB%E6%84%8F%E3%81%AE%E8%AA%8D%E8%A8%BC%E5%BF%85%E9%A0%88%E3%83%9A%E3%83%BC%E3%82%B8" frameborder="0" scrolling="no" loading="lazy"></iframe></span><h1 id="classic-universal-login">
<a class="header-anchor-link" href="#classic-universal-login" aria-hidden="true"></a> Classic Universal Login</h1>
<h2 id="auth0-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E3%81%AA%E3%81%84%E3%81%A8%E3%81%8D-1">
<a class="header-anchor-link" href="#auth0-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E3%81%AA%E3%81%84%E3%81%A8%E3%81%8D-1" aria-hidden="true"></a> Auth0 セッションがないとき</h2>
<span class="embed-block zenn-embedded zenn-embedded-mermaid"><iframe id="zenn-embedded__2d8c261fa8b87" src="https://embed.zenn.studio/mermaid#zenn-embedded__2d8c261fa8b87" data-content="sequenceDiagram%0A%20actor%20user%20as%20%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%0A%20participant%20auth0%20as%20auth0%0A%20participant%20app%20as%20%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%0A%20user%20-%3E%3E%20auth0%3A%20authorize%20request(GET%20%2Fauthorize)%0A%20auth0%20--%3E%3E%20user%3A%20%E4%BC%9A%E5%93%A1%E7%99%BB%E9%8C%B2%E3%83%BB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%20auth0%3A%20GET%20%2Flogin%3Fstate%3Da%0A%20auth0%20--%3E%3E%20user%3A%20%E4%BC%9A%E5%93%A1%E7%99%BB%E9%8C%B2%E3%83%BB%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E8%BF%94%E3%81%99%0A%20user%20-%3E%3E%20auth0%3A%20%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%80%81%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%0A%20user%20-%3E%3E%20auth0%3A%20POST%20%2Fusernamepassword%2Fchallenge%20body%20state%3Da%0A%20auth0%20--%3E%3E%20user%3A%20200%20response%20body%20blank%0A%20user%20-%3E%3E%20auth0%3A%20POST%20%2Fusernamepassword%2Flogin%20body%20state%3Da%2Cemail%2Cpassword%0A%20auth0%20--%3E%3E%20user%3A%20200%20response%20body%20blank%0A%20user%20-%3E%3E%20auth0%3A%20POST%20%2Fusernamepassword%2Flogin%20body%20state%3Da%0A%20auth0%20--%3E%3E%20user%3A%20200%20response%20body%20blank%0A%20user%20-%3E%3E%20auth0%3A%20POST%20%2Flogin%2Fcallback%0A%20auth0%20--%3E%3E%20user%3A%20resume%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%20auth0%3A%20GET%20%2Fauthorize%2Fresume%3Fstate%3Db%0A%20auth0%20--%3E%3E%20user%3A%20%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B3%E3%83%BC%E3%83%AB%E3%83%90%E3%83%83%E3%82%AF%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%2B%20app%3A%20GET%20%2Fauth0%2Fcallback%3Fcode%3Dhoge%0A%20app%20-%3E%3E%20auth0%3A%20POST%20%2Foauth%2Ftoken%0A%20auth0%20--%3E%3E%20app%3A%20%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%80%81ID%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%0A%20app%20--%3E%3E-%20user%3A%20%E4%BB%BB%E6%84%8F%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%20app%3A%20GET%20%E4%BB%BB%E6%84%8F%E3%83%9A%E3%83%BC%E3%82%B8" frameborder="0" scrolling="no" loading="lazy"></iframe></span><h2 id="auth0-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E3%81%82%E3%82%8B%E3%81%A8%E3%81%8D-1">
<a class="header-anchor-link" href="#auth0-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E3%81%82%E3%82%8B%E3%81%A8%E3%81%8D-1" aria-hidden="true"></a> Auth0 セッションがあるとき</h2>
<span class="embed-block zenn-embedded zenn-embedded-mermaid"><iframe id="zenn-embedded__17b3f09f82a2" src="https://embed.zenn.studio/mermaid#zenn-embedded__17b3f09f82a2" data-content="sequenceDiagram%0A%20actor%20user%20as%20%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%0A%20participant%20auth0%20as%20auth0%0A%20participant%20app%20as%20%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%0A%20user%20-%3E%3E%20auth0%3A%20authorize%20request(GET%20%2Fauthorize)%0A%20auth0%20--%3E%3E%20user%3A%20%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B3%E3%83%BC%E3%83%AB%E3%83%90%E3%83%83%E3%82%AF%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%2B%20app%3A%20GET%20%2Fauth0%2Fcallback%3Fcode%3Dhoge%0A%20app%20-%3E%3E%20auth0%3A%20POST%20%2Foauth%2Ftoken%0A%20auth0%20--%3E%3E%20app%3A%20%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%80%81ID%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%0A%20app%20--%3E%3E-%20user%3A%20%E4%BB%BB%E6%84%8F%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%B8%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%0A%20user%20-%3E%3E%20app%3A%20GET%20%E4%BB%BB%E6%84%8F%E3%83%9A%E3%83%BC%E3%82%B8" frameborder="0" scrolling="no" loading="lazy"></iframe></span>

これは何

New Universal Login

Auth0 セッションがないとき

Auth0 セッションがあるとき

Classic Universal Login

Auth0 セッションがないとき

Auth0 セッションがあるとき

Discussion