Firebase

ファイアベース

Next.js

Firebase

TypeScript

Firebase を分かりやすく？

Firebase は、サーバーレスでアプリケーション開発に必要な機能を一元的に提供するプラットフォームです。Google が提供しており、アプリケーション開発に必要な機能が揃っているため、アプリケーション開発においてよく利用されています。

Firebase の主な機能としては、以下のようなものがあります。

データベース
認証
ストレージ
ホスティング
アプリ分析
パフォーマンスモニタリング

Firebase のインストール

Firebase を使用するには、npm で Firebase をインストールする必要があります。以下のコマンドを実行して Firebase をインストールします。

npm install firebase

Firebase の使用例

Firebase の使い方を例として、Firebase の認証機能を利用して、Google アカウントでのログインを実装する方法を説明します。

まず、Firebase の設定を行います。

import firebase from 'firebase/app'
import 'firebase/auth'

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
}

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

export default firebase

次に、Google ログインの実装を行います。

import { useState } from 'react'
import firebase from '../firebase'

export default function Login() {
  const [user, setUser] = useState<firebase.User | null>(null)

  const loginWithGoogle = async () => {
    const provider = new firebase.auth.GoogleAuthProvider()
    try {
      const result = await firebase.auth().signInWithPopup(provider)
      setUser(result.user)
    } catch (error) {
      console.error(error)
    }
  }

  const logout = async () => {
    try {
      await firebase.auth().signOut()
      setUser(null)
    } catch (error) {
      console.error(error)
    }
  }

  return (
    <div>
      {user ? (
        <>
          <p>{user.displayName}さんでログインしています。</p>
          <button onClick={logout}>ログアウト</button>
        </>
      ) : (
        <button onClick={loginWithGoogle}>Googleでログイン</button>
      )}
    </div>
  )
}

new firebase.auth.GoogleAuthProvider()で Google 認証を行うための Provider を取得し、firebase.auth().signInWithPopup(provider)で Google OAuth ログインを行います。

続いて、Firebase Authentication によるユーザー認証について見ていきます。Firebase Authentication は、簡単にアプリに認証機能を追加することができるサービスです。Firebase Authentication を使用することで、サインアップ、ログイン、ログアウト、パスワードリセットなどの機能を実装することができます。

まずは Firebase Authentication を有効化しましょう。Firebase コンソールにアクセスし、左側のメニューから「Authentication」を選択します。次に、有効にする認証プロバイダを選択します。例えば、メールアドレスとパスワード、Google、Facebook、Twitter、GitHub などが選択可能です。今回はメールアドレスとパスワードを使用するため、「メール/パスワード」を選択し、有効化します。

有効化したら、次は実際にユーザー認証を実装していきます。Firebase Authentication を使用するためには、Firebase SDK をインストールする必要があります。次のコマンドを使用して、Firebase SDK をインストールします。

npm install firebase

インストールが完了したら、Firebase SDK を使用して Firebase アプリを初期化します。Firebase アプリを初期化するには、Firebase コンソールから取得した構成情報を使用する必要があります。具体的には、apiKey、authDomain、projectId、storageBucket、messagingSenderId、appId の 6 つの値が必要です。これらの値は、Firebase コンソールの「プロジェクトの設定」から取得できます。次のように、firebase/app モジュールを使用して Firebase アプリを初期化します。

import firebase from 'firebase/app'
import 'firebase/auth'

const firebaseConfig = {
  // 各種構成情報をここに記述する
}

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

export default firebase

firebase/auth モジュールを使用することで、Firebase Authentication の認証機能を利用することができます。認証機能を使用するためには、Firebase Authentication の認証プロバイダを使用してログインする必要があります。例えば、メールアドレスとパスワードを使用してログインする場合は、signInWithEmailAndPassword メソッドを使用します。

import firebase from '@/lib/firebase'

const handleLogin = async (email: string, password: string) => {
  try {
    await firebase.auth().signInWithEmailAndPassword(email, password)
  } catch (error) {
    console.error(error)
  }
}

signInWithEmailAndPassword メソッドは、メールアドレスとパスワードを引数に取り、ログインに成功した場合はログインしたユーザー情報を返します。ログインに失敗した場合は、エラーを返します。

Next.js を学ぶ一覧へ