👍

Next.jsにAuth0でログイン機能を実装

に公開
JavaScript
Next.js
React
TypeScript
Auth0
tech

この記事ではAuth0を使用してNext.jsアプリにログイン機能を実装します。

今回作成するソースを先に載せておきます。
GitHub

Auth0とは

Auth0とはWEBアプリ・モバイルアプリ・API等に認証・認可機能を提供してくれるクラウドサービスです。
いわゆるIDaasと言われるサービスです。

IDaaSとはIdentity as a Serviceの略称で、アイデンティティ（Identity）の管理をSaaSやIaaSなどと同じくクラウドにて管理するサービスです。

前提条件

Auth0のアカウントを作成してください。
⇢Auth0公式

Next.js環境構築

まずは簡単にNext.jsアプリの環境を構築します。
Next.jsの構築方法はこちらを参考にしてみてください。
⇢Dockerで、Next.js,TypeScript環境構築方法
プロジェクト名はnext-auth0で作成しました。

Auth0

Next.jsアプリの作成ができたら、Auth0のテナントドメインを作成します。
右上のCreateApplicationを押下しましょう。

次にNameに任意の名前を入力して、Single Page Web Applicationsを選択します。
そうしたら、右下のCreateボタンを押下しましょう。

これでテナントドメインの作成が完了です。
次に作成したテナントドメインにアクセス許可をつけましょう。

settingタブを押下します。

Allowed Callback URLs,Allowed Logout URLs,Allowed Web OriginsにURLを入力しましょう。

``
Allowed Callback URLsはユーザーが認証後に遷移するURLを入力します。
Allowed Logout URLsはユーザーがログアウト後に遷移するURLを入力します。
'Allowed Web Origins'はAuth0にアクセスを許可するURLを入力します。

ここまで入力できたら、一番したのSave Changesを押下しましょう。

認証機能実装

ここまでできたら、Next.js側で認証機能の実装をしていきます。

まずは@auth0/auth0-reactを入力してインストールします。

npm install @auth0/auth0-react

npm WARN saveError ENOENT: no such file or directory, open '/usr/src/app/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/usr/src/app/package.json'

その場合、--prefix ディレクトリ名を入力して、インストールします。

docker-compose run app npm --prefix ./ディレクトリ名 install @auth0/auth0-react

Auth0と連携するための設定

Auth0と連携するための設定を行います。
pagesディレクトリ内にある_app.tsxファイルを下記のように編集します。

_app.tsx
 import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { Auth0Provider } from '@auth0/auth0-react'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Auth0Provider
      domain=Auth0で作成したドメイン
      clientId=Auth0で作成されたClientID
      redirectUri="http://localhost:3000/"
    >
        <Component {...pageProps} />
    </Auth0Provider>
  )
}
export default MyApp

ログイン機能実装

ログイン機能を実装します。
pages等があるデイレクトリにcomponentsフォルダを作成しましょう。

mkdir components

作成したcomponentsフォルダ内にlogin.tsxファイルを作成しましょう。

cd components
touch login.tsx

login.tsxを編集しましょう。

login.tsx
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

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

  return isAuthenticated ? null : (
  <button onClick={() => loginWithRedirect()}>Log In</button>);
};

export default LoginButton;

ログアウト機能実装

次にログアウトもできるようにしましょう。
componentsディレクトリ内にlogout.tsxファイルを作成しましょう。

touch logout.tsx

logout.tsxも編集しましょう。

logout.tsx
mport React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const LogoutButton = () => {
  const { user, isAuthenticated, logout } = useAuth0();

  return isAuthenticated ?(
    <div>
        <p>ログイン完了</p>
        <p>{user?.email}</p>
        <button onClick={() => logout({ returnTo: window.location.origin })}>
          Log Out
        </button>
    </div>
  ) : null;
};

export default LogoutButton;

最後にindex.tsxに作成したlogin.tsxとlogout.tsxをimportして使用しましょう。

index.tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import LoginButton from '../components/login'
import LogoutButton from '../components/logout'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
        <LoginButton/>
        <LogoutButton/>
      </main>
    </div>
  )
}

export default Home

以上で実装が完了です。
実際にできているかhttp://localhost:3000/にアクセスして確認してみましょう!

Log Inボタンを押してみると、ログイン画面が表示されました！

Sign upから新たにe-mailとPASSWORDを作成して、ログインをして見るとLog Outボタンとログイン完了の文字が表示されていると思います！！

Log Outボタンを押すとLog Inボタンが表示されます！

これで認証機能の実装は完了です！！
やり方を覚えてしまえば簡単にできますね。

認証機能が楽にできてしまえば、コア機能に集中できて良いですね！

終わり

最後まで見てくださりありがとうございました！！

これからもブログの更新を頑張っていきますので、是非フォローしてください！

色々な人と繋がって輪を広げていきたいです！！

ツイッターもやっているのでぜひフォローもお願いします！
Twitter

Discussion