🤖

【AWS cognito】googleソーシャルログインやってみた

2023/12/04に公開

NextAuth

参考記事

GCPの認証情報

まずはGCPの以下画面を埋めて、OAuth2.0クライアントの同意画面の情報を埋める
(必要がある人だけ)

次にOAuth2.0クライアントの作成画面の情報を埋める

名前は自分の好きな名前、承認済みのURLはlocalhost:3000でOK。

AWS cognito

ユーザープールを作成します。

フェデレーテッドアイデンティティプロバイダーを選択し、下にスクロールして「Google」を選択。

今回はgoogleとOpenID Connectの2つを選択してみます。OpenID Connectも使ったログイン実装も予備でしていきます。

以下の画面でさっきGCPで作成したOAth2.0のクライアントIDとシークレットを入力します。

OPENID Connectは後で設定するので後ほど設定を選んでもらって大丈夫です。

Google APIにCognito情報を追加

GCPのOAth2.0の「承認済みのURL」にアプリケーションを統合の設定で作成したCognitoドメインを追加する。

next auth

npm i next-authでインストール

参考元の記事より以下のコードをコピペさせていただく

import NextAuth from 'next-auth'
import CognitoProvider from 'next-auth/providers/cognito'

const handler = NextAuth({
  secret: process.env.NEXTAUTH_SECRET,
  providers: [
    CognitoProvider({
      clientId: process.env.COGNITO_CLIENT_ID ?? '',
      clientSecret: process.env.COGNITO_CLIENT_SECRET ?? '',
      issuer: process.env.COGNITO_ISSUER ?? '',
      checks: 'nonce'
    }),
  ],
})


export { handler as GET, handler as POST }

nextのenvファイルを設定

以下のコードも参考記事より引用しております。

COGNITO_CLIENT_ID = CognitoのクライアントID
COGNITO_CLIENT_SECRET = Cognitoのシークレットキー
COGNITO_ISSUER = https://cognito-idp.{cognitoのregion}.amazonaws.com/{ユーザープールID}
NEXTAUTH_URL=http://localhost:12000
//サインイン後のリダイレクトURL
NEXTAUTH_SECRET="ランダムな文字列"

NextAuth.tsxを作成

参考の記事よりコードを引用

'use client'

import { SessionProvider } from 'next-auth/react'
import React from 'react'
import { ReactNode } from 'react'

const NextAuthProvider = ({ children }: { children: ReactNode }) => {
  return <SessionProvider>{children}</SessionProvider>
}

export default NextAuthProvider

layout.tsxの設定

以下のコードを参考記事から拝借

import './globals.css'
import { Inter } from 'next/font/google'
import NextAuthProvider from '@/providers/NextAuth'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='ja'>
      <body className={inter.className}>
        <NextAuthProvider>{children}</NextAuthProvider>
      </body>
    </html>
  )
}

コンポーネントの作成

こちらも元の記事のコードから拝借しました。

"use client";
import {signIn, signOut} from "next-auth/react";
import React from "react";

// ログインボタン
export const LoginButton = () => {
    return (
        <button  onClick={() => signIn()} className="mt-4 bg-blue-500 hover:bg-blue-300 active:scale-90 transition-all duration-200 text-white py-2 px-4 rounded-full mx-auto">
        サインイン
        </button>
    );
};

// ログアウトボタン
export const LogoutButton = () => {
    return (
        <button className="mt-4 bg-red-500 hover:bg-red-300 active:scale-90 transition-all duration-200 text-white py-2 px-4 rounded-full mx-auto" onClick={() => signOut()}>
            サインアウト
        </button>
    );
};

'use client'
import { useSession } from 'next-auth/react'
import React from 'react'
export default function isLoggedIn() {
  const { data: session } = useSession()

  if (!session) {
    return <p>ログインしていません。</p>
  }

  return (
    <div>
      {session.user ? `${session.user.email}としてログインしています。`  : '読み込み中...'}
    </div>
  )
}

page.tsx

こちらも元の記事のコードから拝借しました。

'use client';
import React, { use } from 'react'
import { LoginButton, LogoutButton } from '@/components/AuthenticateButton'
import  IsLoggedin from '@/components/IsLoggedin'

export default function Home() {
    return (
    <main className='flex h-screen justify-center items-center'>
  <div className='text-center'>
    <h1 className='text-4xl font-bold'>Next Auth</h1>
    <IsLoggedin/>
    <LoginButton/>
    <LogoutButton/>
  </div>
</main>

  )
}

vercelにデプロイするとserver errorが発生する

こちらにある通り、vercelにデプロイ後、環境変数を設定してから、redeployを行うと、直ります。
また、上記で設定したAWS CognitoとGoogleのOathのURLはlocal3000以外に、vercelのURLを設定してください。

アクセストークンの取得

NEXT-AUTHを使ってアクセストークンの取得もできますので、興味がある方は以下の記事をご覧ください。