Next.jsにAuth0でログイン機能を実装
この記事では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ファイルを下記のように編集します。
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を編集しましょう。
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も編集しましょう。
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して使用しましょう。
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