Auth0+Reactでログインを実装する

この記事は IDaaS Advent Calendar 2022 18日目の投稿です。

https://qiita.com/advent-calendar/2022/idaas 

## はじめに
Auth0はデフォルトのログイン画面などが用意され、簡単に利用できるIDaaSです。
今回はデフォルトログイン画面を利用したオーソドックスな方法で進めます。

## 技術スタック
* Auth0 [auth0-react](https://github.com/auth0/auth0-react)
* React v18.2.0

## セットアップ

auth0のReactライブラリに従って進めます

https://github.com/auth0/auth0-react

インストール
```shell
npm i @auth0/auth0-react
```

react作成
```
npx create-react-app sample
```

## 実装

index.jsを修正(auth0_domainとauth0_clientidは修正してください)
```react
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Auth0Provider } from '@auth0/auth0-react';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Auth0Provider
    domain={auth0_domain}
    clientId={auth0_clientid}
    redirectUri={window.location.origin}
  >
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Auth0Provider>
);
```

app.jsもなおす
```react
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

function App() {
  const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout } =
    useAuth0();

  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Oops... {error.message}</div>;
  }

  if (isAuthenticated) {
    return (
      <div>
        Hello {user.name}{' '}
        <button onClick={() => logout({ returnTo: window.location.origin })}>
          Log out
        </button>
      </div>
    );
  } else {
    return <button onClick={loginWithRedirect}>Log in</button>;
  }
}

export default App;
```

auth0ダッシュボードにて、localhostからのアクセスを許可するところで罠
https://127.0.0.1:3000 にしないと保存できません
昔はそういうのは無かったと思うのですが、変わったんですかね?

※参考にしたURL https://zenn.dev/harasho/articles/dafcbe9fc7ab04ffefe6
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1236946/8fb4f7c8-38ad-6da6-64a0-b20cce107932.png" width="500px">

ここまでで動くようになりました
```
npm run start
```

ログインを押すと
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1236946/e8741091-d8cc-7c83-ed6e-db7e7d83e151.png" width="500px">

Auth0のデフォルトログイン画面が立ち上がり
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1236946/ca2c25e7-6d07-5d08-1ff8-926963a9ec4d.png" width="300px">

ログイン成功すると、ユーザー名(auth0 tester)を取得できる
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1236946/ed34bf91-9d19-a3c8-45ee-230fc6a6cb1c.png" width="500px">


## Auth0の認証フローについて
Auth0の認証フローは
* 今回のAuthorization Code Flow
* モバイルアプリ向けのAuthorization Code Flow with Proof Key for Code Exchange (PKCE)
* APIサーバーとauth0間(M2M)の認証に使うClient Credentials Flow

などなどがあります。

https://auth0.com/docs/get-started/authentication-and-authorization-flow

## Authorization Code Flow
基本的には、以下の流れになります。

2番：/authorizeエンドポイント経由でAuthorization Codeを依頼
3~4番：login/authorizationプロンプト(Auth0デフォルトのログイン画面)にリダイレクトする
5番：Auth0デフォルトのログイン画面で、認証が成功してAuthorization Codeを取得
6~8番：取得したAuthorization Codeを/oauth/tokenエンドポイントでID TokenとAccess Tokenに交換してもらえる

※今回はAPIサーバーを立ててないので9番と10番のステップは無いです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1236946/7893f309-2d5d-a8d8-ebc5-dc7576b5520f.png" width="700px">

↑図の引用元 https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow

## 最後に
Cross-Origin Authenticationについても触れたかったのですが、途中で力尽きました..
どこかで書きます。がんばります。

IDaaSを利用したアプリケーション開発にお悩みの方は弊社TC3までお問い合わせください。また、優秀なアーキテクトからの応募も常時受け付けています。

https://www.tc3.co.jp/