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 [at]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作成のご依頼は、

https://iteek.jp/contact/

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

# 参考

https://nextjs.org/

https://next-auth.js.org/