Zenn
🗂

Auth0での認証実装とSPA(React)の認証方法について再確認

2023/01/22に公開
React
Node.js
Auth0
tech

SPAでのAuth０をつかった認証の実装を行い、裏側で何が行われているのかを確認しましょう

実装

Auth0を用いることで非常に簡単に実装を行うことが出来ます。
今回はReactを用います。

手順を下記します。

  1. ReactのAppを作成します。
  2. Auth0にアカウントを作成し、auth0-reactというSDKを先ほどのAppにインストールして、ログインページを作って完了

たった２手順でこんなに簡単に出来ます。

ReactのAppを作成

nodeが入っていることは前提です。(Node >= 14.0.0 及び npm >= 5.6)

npx create-react-app my-app
cd my-app
npm start

最後のnpm startを実行すると自動的にlocalhost:300が立ち上がると思います。

上記画面が出てくれば、React Appが作られたことになります。

Auth0にアカウントを作成/auth0-reactというSDKをインストール/ログインページを作成

Auth0でアカウントを作成します。
作成が終わり、ログインが完了し、下記のURLを押すと下添付のような画像が出てくると思います。
ダッシュボードのURL

左のタブの「Applications」を押して、Create Applicationで新規Auth0Appを作成します。
Reactのため、Single Page Web Applicationを選択し、Createを押します。

作ったApplicationのStettingでApplicatin URLsのセクションに移動し、

  • Allowed Callback URLs
  • Allowed Logout URLs
  • Allowed Web Origins

の欄に「http://localhost:3000」と入力してください。
最後にSettingページ最下部のSave Changesを押します。

アプリを起動した先ほどのターミナルで

npm install @auth0/auth0-react

を実行してAuth0用のReactのSDKをインストールします。
先ほど作成したmy-appのsrc/index.jsを下記のように変えてください。

index.js
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Auth0Provider
    domain="YOUR_DOMAIN"
    clientId="YOUR_CLIENT_ID"
    authorizationParams={{
      redirect_uri: window.location.origin,
    }}
  >
    <App />
  </Auth0Provider>
);

your domain と　your client idはAuth0のダッシュボードから取得できます。

App.jsを編集する。

App.js
import logo from "./logo.svg";
import "./App.css";
import { useAuth0 } from "@auth0/auth0-react";

function App() {
  const { loginWithRedirect, logout, isAuthenticated, user } = useAuth0();
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <button onClick={() => loginWithRedirect()}>Login</button>
        {isAuthenticated && (
          <div>
            <img src={user.picture} alt={user.name} />
            <h2>{user.name}</h2>
            <p>{user.email}</p>
          </div>
        )}
        <button onClick={() => logout()}>Logout</button>
      </header>
    </div>
  );
}

export default App;

ログインボタンを押すと、Auth0のログインページにリダイレクトされる。

Googleアカウントがあれば、下のGoogleアカウントでログインのボタンを押してみてください。
確認画面はAcceptします。ログイン成功すると下記画面が出てきます。
Logoutボタンを押すと消えることがわかります。

再確認

実装としては、以上になるのですが、Auth0がどうやって認証を行っているかを確認します。
詳しくは下記を見れば分かりますが、自分でも理解するためにまとめてみます。


https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-proof-key-for-code-exchange-pkce

  1. ログインボタンを押す
    Auth0SDKが暗号化されたランダムなcode_verifierとそれを使ったcode_challengeを生成する
    code_challengeを含めて自分のAuth0ドメイン/authorizeのURLを叩いてAuth0のサーバーにリダイレクトする

  2. ユーザー情報を打ち込んでログインする
    まず、request_headerに書いてあった、code_challengeをAuth0の認可サーバーに保存する
    そして、認証codeを付与してアプリケーションにリダイレクトしてくる

  3. IDトークンとアクセストークンを取得する
    上で取得したcodeと作っていたcode_varifierを用いてAuth0認可サーバーのエンドポイント(/oauth/token)のを叩く。
    認可サーバーではcode_challengeとcode_verifierを検証してあっていれば、Auth0認可サーバーがIDトークンとアクセストークンを返却します。

  4. アクセストークンを使ってAPI経由でユーザー情報を取得します。

疑問

アクセストークンの置き場所は？インメモリは見ることできない？
ユーザー情報を取ってきている通信が見当たらないが、どこで行っているのか？

FYI

React Auth0の公式Doc
https://auth0.com/docs/quickstart/spa/react/interactive

Discussion