この記事はteam411アドベントカレンダー Advent Calendar 2024の21日目の記事です。
昨日の記事はSINNさんの??でした。
はじめに
皆さん、はじめまして。電気通信大学１年のフラーレンです。最近Firebaseを使い始めたので、備忘録も兼ねてこれから使い始める人向けに簡単にセットアップの仕方と簡単なログイン認証を説明しようと思います。TypescriptでReactを書いていくのでわからない人はまずそこから学習してみてください。
Firebaseとは
FirebaseとはGoogleが提供しているモバイル開発やWeb開発のためのプラットホームです。Firebaseを使うことによってバックエンドを簡単に構築できるのでとても便利です。詳しいことはたくさんネットに転がっているので深く知りたい方は各自で調べてください。
今回実装したいこと
今回はFirebaseで提供されている「Firebase Authentication」を使って、ログイン認証を作っていきたいと思います。「Firebase Authentication」を使うことでWebアプリに認証機能を追加できます。
下準備
Node.jsのダウンロードと、Next.jsプロジェクトファイルの作成を行います。https://nodejs.org/en/download/package-manager に飛ぶとインストールするためのコマンドとそのコメントが表示されているのでコメントを読みながら、一行ずつコピーしてターミナルで実行してください。バージョンは最新のものかLTSとついてるやつの中で一番新しいものを選んでください。OSは自分のパソコンのOSのものを選択してください。バージョン管理ツールはnvmを使えば大丈夫です。
次にVScodeでターミナルを開き、作業ディレクトリを作ってください。名前はなんでもいいです。
$ mkdir <作業ディレクトリ>
$ cd <作業ディクトリ>
作ったディレクトリに移動したらターミナルで
$ npx create-next-app
を実行してください。そうすると色々質問されるので答えていきます。
Need to install the following packages:
create-next-app@15.1.0
Ok to proceed? (y) y
✔ What is your project named? … <プロジェクト名>
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
最初の質問はyと答え、次にプロジェクト名を聞かれるので好きなプロジェクト名を決めてください。あとの質問は最後以外Yesを選択してください。プロジェクトファイルの作成が終わったら次のコマンドを実行してください。
npm run dev
その後 localhost:3000にアクセスすると次のような画面が表示されると思います。これで下準備は完了です。
firebaseを導入する
Googleで「firebase」と検索して一番上に出てくるサイトを開きます。
画面右上のログインボタンをクリックします。Googleのログイン画面が表示されるのでログインします。次に画面中央にある使ってみるボタンをクリックします。そうすると次のようなコンソール画面が表示されると思います。
Firebaseを使ってみるをクリックします。
プロジェクト名を聞かれるので好きな名前を設定して続行をクリックします。
Google Analiticsを使うか聞かれますが今回は使わないのでアナリティクスを有効にするに入ってるチェックを外してください。続行をクリックするとロードが始まるのでしばらく待ちます。終わったら続行をクリックしてください。
</>みたいなボタンをクリックしてください。(マウスを重ねるとウェブと表示されるやつです）
アプリのニックネームを聞かれるので自分の好きな名前を設定してください。Fire Hostingのチェックボックスは空のままでも大丈夫です。
下準備で用意したプロジェクトファイル内でターミナルを開き
$ npm install firebase
$ npm install react-firebase-hooks
を実行してください。
次にプロジェクトファイル内のsrcディレクトリの中にfirebase.tsファイルを作成して
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "hoge",
authDomain: "hoge",
projectId: "hoge",
storageBucket: "hoge",
messagingSenderId: "hoge",
appId: "hoge",
measurementId: "hoge"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
みたいなやつをfirebase.tsファイル内にコピペしてください。コピペし終わったらコンソールに進むをクリックしてください。
次に人のイラストが書いてあるAuthenticationをクリックしてください。
始めるをクリックしてください。
今回はGoogle認証を使おうと思うのでGoogleと書かれた所をクリックしてください。
有効にするをクリックしたらサポートメールアドレスを聞かれるので自分のメールアドレスを入力してください。
このような画面が出ていれば成功です。次にVScodeでfirebase.tsファイルの中少し書き換えます。このとき、firestoreの設定も同時にやっておきます。
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "hoge",
authDomain: "hoge",
projectId: "hoge",
storageBucket: "hoge",
messagingSenderId: "hoge",
appId: "hoge",
measurementId: "hoge"
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();
export { auth, provider };
これで下準備が完了しました。
実装
src/appディクトリ内のpage.tsxを次のように書き換えてください。
"use client";
import { useState, useEffect } from "react";
import { signInWithPopup } from "firebase/auth";
import { auth, provider } from "../app/firebase";
import { useAuthState } from "react-firebase-hooks/auth";
export default function Home() {
//textオブジェクトの型を定義
interface text {
id: string;
text: string;
}
//textオジェクトの状態を管理
const [text, setText] = useState<text[]>([]);
// Firebase Authenticationの状態を管理(ここに現在のユーザー情報が入る)
const [user] = useAuthState(auth);
//サインインボタンのコンポーネント
const SignInButton = () => {
const SignInWithGoogle = async () => {
try {
await signInWithPopup(auth, provider);
} catch (error) {
console.error("Sign-In Error");
}
};
return (
<div>
<button
type="button"
className="bg-blue-500 text-white font-bold py-2 px-2 rounded"
onClick={SignInWithGoogle}
>
Googleでログイン
</button>
</div>
);
};
//ログアウトボタンのコンポーネント
const SignOutButton = () => {
return (
<div>
<button
type="button"
className="bg-blue-500 text-white font-bold py-2 px-2 rounded"
onClick={() => auth.signOut()}
>
ログアウト
</button>
</div>
);
};
//レンダリングする内容
return (
<div>
<div>{user ? <SignOutButton /> : <SignInButton />}</div>
</div>
);
}
もし赤い波線が出てモジュールの型定義がありませんと言われた場合、次のコマンドをプロジェクトファイル内で実行してください。
$ npm install --save-dev @types/firebase
それでも消えなかった場合はカレントディレクトリが間違ってないかを確認してみてください。この段階でターミナルで
$ npm run dev
をすると次のような画面が出てくるはずです。
Googleでログインを選択して実際にログインしてみてください。ログインが成功したら次の画面のようにGoogleでログインがログアウトボタンに変わっているはずです。
この状態でFirebaseのコンソールを見てみます。
すると画像のようにユーザーが追加されていると思います。これでログインの実装は終了です。
おわりに
いかがだったでしょうか。今回はFirebaseのセットアップと簡単なログイン認証を実装してみました。次回はFirestoreというのを用いてデータベースを実装するといったのをやってみようかなと思います。自分で機能を追加していくというのはいい勉強になると思うので興味がある人は色々作ってみるといいと思います。
Discussion