【個人開発_#4】Googleログイン機能を実装

前回は、UI部分の実装を進めました。
今回は、Googleログイン機能を実装していこうと思います。

今回のアプリはGoogleログインだけに絞って開発をしようと思います。

ほとんどこちらの記事を参考にさせていただきました。

実際にこちらの記事を参考に自分のプロジェクトに合わせた箇所だけピックアップします。

まだ、UIが変わるかもしれませんが一旦トップページのところでログインボタンとログアウトボタンを実装してみます。

'use client';
import Footer from '@/components/Footer';
import Image from 'next/image';
import Button from '@/components/Button';
import Header from '@/components/Header';
import { useSession, signIn, signOut } from 'next-auth/react';

export default function Home() {
  const { status } = useSession();

  return (
    <>
      <Header />
      // 省略
          <h1 className="text-2xl text-center mt-6">協力隊の輪</h1>
          <div className="text-center mt-10">
            {status === 'authenticated' ? (
              <Button onClick={() => signOut()}>ログアウト</Button>
            ) : (
              <Button onClick={() => signIn('google', {}, { prompt: 'login' })}>ログイン</Button>
            )}
          </div>
　　　　　　　　　　　　// 省略
      <Footer />
    </>
  );
}

NextAuthから必要なフックをインポートします。

import { useSession, signIn, signOut } from 'next-auth/react';

statusによってボタンを出し分けます。
未ログインの際には、unauthenticatedとなり、ログイン後はauthenticatedとなります。

{status === 'authenticated' ? (
  <Button onClick={() => signOut()}>ログアウト</Button>
) : (
  <Button onClick={() => signIn('google', {}, { prompt: 'login' })}>ログイン</Button>
)}

ログイン後はcokkieのnext-auth.session-tokenにトークンが保存されるようです。

ログイン後の、Googleに登録されている情報は下記のように表示させることが可能です。
ヘッダー部分に画像を表示させてみます。

Header/index.tsx

'use client';
import { useSession } from 'next-auth/react';

export default function Header() {
  const { data: session, status } = useSession();

  return (
    {status === 'authenticated' ? (
    <Link href="#">
      <Image src={session.user?.image ?? ``} alt="logo" width={45} height={45} />
    </Link>
    ) : (
    <Link href="/login" className='className="px-4 py-2 bg-main-500 text-white rounded-md"'>
      ログイン
    </Link>
    )}
  )

nameやemailなども表示させることが可能です。

まとめ

とても参考になるQiita記事がありスムーズに実装ができました。
次回は、SupabaseとPrismaを導入して、データの永続化をしていこうと思います！