Next.js で SNS アカウント認証！

はじめに

前回、Next.js について調べてみたので、今回はよく使うアカウント認証について、アプリケーションを作ってみようと思います。

Next.js を開発している Vercel が作っている NextAuth.js を使用します。

アプリを作ってみる

sample という名前でアカウント認証付きのアプリケーションを作成します。

1. まずは、Hello world！

$ yarn create next-app --typescript
$ cd sample
$ yarn add next-auth
$ yarn add -D @types/next-auth
$ yarn dev

2. いらないファイルを削除

以下のファイルを削除します。

• sample/pages/api/hello.ts
• sample/styles/Home.module.css

3. API route を追加

pages/api/auth/[...nextauth].ts を作成します。

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
    providers: [
        Providers.GitHub({
            clientId: process.env.GITHUB_ID,
            clientSecret: process.env.GITHUB_SECRET
        }),
    ],
})

4. React Component 修正

pages/index.tsx を以下のように修正します。

import {signIn, signOut, useSession} from "next-auth/client";

const Page = () => {
    const [session, loading] = useSession();

    return (
        <>
            {!session && (
                <>
                    {loading ? (
                        <>Loading ...</>
                    ) : (
                        <>
                            Not signed in <br/>
                            <button onClick={() => signIn()}>Sign in</button>
                        </>
                    )}
                </>
            )}
            {session && (
                <>
                    Signed in as <br/>
                    <img src={session.user?.image ?? ""} width="50px"/>
                    {session.user?.name} <br/>
                    AccessToken : {session.accessToken} <br/>
                    <button onClick={() => signOut()}>Sign out</button>
                </>
            )}
        </>
    );
};

export default Page;

5. session を作成

pages/_app.tsx を以下のように修正します。

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { Provider } from 'next-auth/client'

export default function App ({ Component, pageProps }: AppProps) {
  return (
    <Provider session={pageProps.session}>
      <Component {...pageProps} />
    </Provider>
  )
}

6. GitHub で ClientId, Secret を取得

Settings > Developer settings から Register new GitHub App を選択してください。

GitHub App name: ryoka sample application ※適宜変えてください

Homepage URL: http://localhost:3000

Identifying and authorizing users - Callback URL: http://localhost:3000

Webhook - Active: 非アクティブにする

Create GitHub App を選択し、作成します。

表示されている Client ID と Generate a new client secret を選択して表示される Secret を控えます。

7. 環境変数を設定

.env.local を作成します。

GITHUB_ID=<上で取得した Client ID>
GITHUB_SECRET=<上で取得した Secret>

8. 動作確認

$ yarn dev

ブラウザから http://localhost:3000 にアクセスします。

おわりに

いかがでしたか。

NextAuth.js を使うことで SNS アカウント認証も簡単にできたかと思います。

今回は GitHub アカウントのみやっていますが、同様に Twitter, Google Facebook なども実装可能です。

対応している Provider は、https://next-auth.js.org/configuration/providers　を参照ください。

お知らせ

Webサイト・ツール・LP作成のご依頼は、

こちらからお問い合わせいただけます。お気軽にご相談ください。

参考