Cognito認証->NextAuth+Auth0認証(備忘録)

前回Cognito認証つけたんですがCognito微妙そうなのでAuth0で認証やってみました。

Cognito認証の削除

amplify remove auth
# User Poolとか消していいか聞かれるのでY

amplify push

Auth0認証の追加

Auth0のダッシュボード->Create Application->Single Page Applicationを選択

NextAuthをnpmで入れる

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

して

const { isAuthenticated, loginWithRedirect, logout } = useAuth0();

return isAuthenticated ? (認証済みのひとに見せたいコンテンツ) : (未認証のひとに見せたいコンテンツ)

とすれば大丈夫でした。

必要だった設定

Auth0ダッシュボードでの設定

Allowed Callback URLs
Allowed Logout URLs
Allowed Web Origins

ローカルで確認する場合3箇所ともlocalhost:3000

.envの設定

      <Auth0Provider
        domain={domain}
        clientId={clientId}
        redirectUri={redirectUri}
      >

domain, clientId, redirectUriにAuth0ダッシュボードに表示されてる値を代入

参考

GitHub - nextauthjs/next-auth-typescript-example: An example project that shows how to use NextAuth with TypeScript

その他

はてぶ移行したい