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

![nextjs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659561/c4f94bd7-ec5c-512c-3024-4dc69119a2e0.png)


# はじめに

前回、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作成のご依頼は、

https://iteek.jp/contact/

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

# 参考

https://nextjs.org/

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