Twitter clone Part8 next authとfirebaseを使ってログインページの実装

概要

今回はfirebaseとnext authを使ってログイン機能を実装します。
以下実装後の様子です。

開発環境

OS:Windows10
IDE:VSCode

package.json

{
  "name": "",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^1.0.6",
    "next": "12.0.9",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "^20.4.2",
    "@types/react": "^18.2.15",
    "autoprefixer": "^10.4.2",
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.9",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.18"
  }
}

実装のポイント

firebase側の設定をする

プロジェクトを新規作成

ウェブアプリを登録　apiKey

Authenticationの設定　ログインプロバイダにgoogleを加える

Next.js　（next auth）

環境変数ファイルを作成　.env.local

firebase.jsのパラメータを設定

[...nextauth].jsで使うパラメータを設定

コード部分の実装

pages/api/auth/[...nextauth].js nextauthの設定ファイル

[...nextauth].js

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"


export default NextAuth({
    providers:[
        GoogleProvider({
            clientId:process.env.GOOGLE_CLIENT_ID,
            clientSecret:process.env.GOOGLE_CLIENT_SECRET,
        }),
    ],

    pages:{
        signin: "/auth/signin"
    }
})

pages/auth/signin ログインページ

signin.jsx

import {getProviders, signIn} from "next-auth/react";

export default function signin({providers}){
    return(
        <div className="flex justify-center mt-20 space-x-4">
        <img
          src="https://cdn.cms-twdigitalassets.com/content/dam/help-twitter/en/twitter-tips/desktop-assets/ch-01/ch12findphone.png.twimg.1920.png"
          alt="twitter image inside a phone"
          className="hidden object-cover md:w-44 md:h-80 rotate-6  md:inline-flex"
        />
        <div className="">
          {Object.values(providers).map((provider) => (
            <div className="flex flex-col items-center">
              <img
                className="w-36 object-cover"
                src="https://help.twitter.com/content/dam/help-twitter/brand/logo.png"
                alt="twitter logo"
              />
              <p className="text-center text-sm italic my-10">
                This app is created for learning purposes
              </p>
              <button
                onClick={() => signIn(provider.id, { callbackUrl: "/" })}
                className="bg-red-400 rounded-lg p-3 text-white hover:bg-red-500"
              >
                Sign in with {provider.name}
              </button>
            </div>
          ))}
        </div>
      </div>
    )
}

export async function getServerSideProps(){
    const providers = await getProviders();
    return{
        props:{providers
        },
    };
}

root/firebase.js firebaseの設定ファイル

firebase.js

import {initializeApp,getApp,getApps} from "firebase/app";
import {getFirestore, getFireStore} from "firebase/firestore";
import {getStorage} from "firebase/storage";
import { get } from "http";


const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId:process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENTID_ID,
};

const app = !getApps().length ? initializeApp(firebaseConfig) :getApp();
const db = getFirestore();
const storage = getStorage();
export{app,db, storage}

.env.local　gitignoreされている

.env.local

GOOGLE_CLIENT_ID=74XXXXXXXXXXXXXXXXXXXX795.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOXXXXXXXXXXXXXXXXXXXXXXXXFzV
NEXT_PUBLIC_FIREBASE_API_KEY=AIzXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXFu0
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=twitterXXXXXXXXXXXX.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=twitter-clone-fukushu
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=twitter-clone-fukushu.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID=740XXXXXXXXXXX
NEXT_PUBLIC_FIREBASE_APP_ID=1:740XXXXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=G-JXXXXXXX

リダレクトURL関係のエラーに対処するため　Google Cloudの設定をする

リダレクトURL関係のエラー　原因はGoogleコンソール側の設定

ログインに失敗するのでこれを解消するために googleConsole側で設定を行います。
以下

プロジェクトを開く

プロジェクトが作成されているので、開きます。

プロジェクトを選択します。

認証情報のOAuth2.0クライアントIDを開いて、クライアントIDとクライアントシークレットが一致していることを確認します。

承認済みのリダイレクトURIに「http://localhost:3000/api/auth/callback/google」を加えます。

設定後googleアカウントでログイン画面が表示されます。

参考

css

javascript

Next.js

Next Auth

React

firebase

その他

Google Cloud

Udemy
76. Complete the signin page

githubコミット分