Zenn
Open14

Auth0入門

まじまっちょまじまっちょ

Auth0Providerコンポーネントを設定

React Contextを内部的に使っているのでAuth0Probiderで全体をラップする

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import { Auth0Provider } from "@auth0/auth0-react";
import { AUTH0_CLIENT_ID, AUTH0_DOMAIN } from './lib/env';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Auth0Provider
      domain={AUTH0_DOMAIN}
      clientId={AUTH0_CLIENT_ID}
      redirectUri={window.location.origin}
    >
        <App />
    </Auth0Provider>
  </React.StrictMode>
)
まじまっちょまじまっちょ

Auth0のログインページでた

import { useAuth0 } from "@auth0/auth0-react";

const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();

  return <button onClick={() => loginWithRedirect()}>Log In</button>;
};

export default LoginButton;
まじまっちょまじまっちょ

https://auth0.com/docs/quickstart/spa/react/02-calling-an-api

02 React: Call an API

audienceとscopeを設定


ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Auth0Provider
      domain={AUTH0_DOMAIN}
      clientId={AUTH0_CLIENT_ID}
      redirectUri={AUTH0_CALLBACK_URL}
      audience={AUTH0_AUDIENCE}   // <- new!!
      scope={AUTH0_SCOPE}              // <- new !!
    >
      <RouterProvider router={router} />
    </Auth0Provider>
  </React.StrictMode>
)
まじまっちょまじまっちょ

メタデータの取得はAPI叩いてやってるっぽい

    const getUserMetadata = async () => {
      if (user?.sub) {
        try {
          const accessToken = await getAccessTokenSilently({
            audience: `https://${AUTH0_DOMAIN}/api/v2/`,
            scope: "read:current_user",
          });
    
          const userDetailsByIdUrl = `https://${AUTH0_DOMAIN}/api/v2/users/${user.sub}`;
    
          const metadataResponse = await fetch(userDetailsByIdUrl, {
            headers: {
              Authorization: `Bearer ${accessToken}`,
            },
          });
    
          const { user_metadata } = await metadataResponse.json();
    
          setUserMetadata(user_metadata);
        } catch (e) {
          console.log(e);
        }  
      }