Firebase Authentication でユーザー認証 & バックエンドにもユーザー登録(統合)

## はじめに
こんにちは！今回は、Webアプリケーションにおけるユーザー認証について、私が取り組んだ「Firebase Authentication」の実装方法を共有したいと思います。

Firebase Authenticationは、手軽に導入できる認証サービスとして多くの開発者に利用されています。特に、バックエンドと連携してデータベースにユーザー情報を登録・管理できる点が便利です。

この記事では、以下の内容をカバーします。

- Firebase Authenticationの概要
- Firebaseによる認証の実装方法
- FirebaseUIDを使用したバックエンドとの統合

ぜひ、実際のプロジェクトに役立ててください。

基本的な説明は[公式ドキュメント](https://firebase.google.com/docs/auth?hl=ja)に任せます。この記事では、バックエンドとの統合のための実装がメインですので、Firebase Authenticationへの登録方法等はリンクをご覧ください。🙇

## 目次
- [Firebase Authenticationとは](#firebase-authenticationとは)
- [準備](#準備)
- [Firebase Authenticationの実装](#firebase-authenticationの実装)
  - [ステップ1: Firebaseプロジェクトの作成と初期化](#ステップ1-firebaseプロジェクトの作成と初期化)
  - [ステップ2: 認証方法の設定と有効化](#ステップ2-認証方法の設定と有効化)
- [Firebase Authenticationとバックエンドの統合](#firebase-authenticationとバックエンドの統合)
  - [ステップ3: フロントエンドでのユーザー登録](#ステップ3-フロントエンドでのユーザー登録)
  - [ステップ4: バックエンドでのユーザー情報管理](#ステップ4-バックエンドでのユーザー情報管理)
- [まとめ](#まとめ)

## Firebase Authenticationとは

Firebase Authenticationは、Googleが提供する認証サービスで、ユーザー管理を簡単に実装できる強力なツールです。特に、メール/パスワード認証、Google、Facebookなどのサードパーティログインを一括で提供しており、さまざまな認証シナリオに対応しています。

主な特徴:
- メール/パスワード認証
- サードパーティログイン（Google、Facebookなど）
- メール確認やパスワードリセット機能
- リアルタイム認証状態管理

## 準備

Firebase Authenticationを導入するには、まずFirebaseコンソールでプロジェクトを作成し、ウェブアプリケーションを登録する必要があります。

### ステップ1: Firebaseプロジェクトの作成と初期化

Firebaseコンソールにアクセスしてプロジェクトを作成し、Firebase SDKをインストールして初期化します。

```bash
$ npm install firebase
```


次に、以下のコードでFirebaseアプリを初期化します。

```typescript:firebase-auth.ts
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID"
};

const app = initializeApp(firebaseConfig);
// Firebase認証の取得
export const auth = getAuth(app)
```

### ステップ2: 認証方法の設定と有効化

Firebaseコンソールで、使用する認証方法（メール/パスワード、Googleログインなど）を有効にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1071957/45129f44-da26-bd4f-6020-686e9542529c.png)

(補足)「テンプレート」タブから送信するメールの文章や言語設定が可能です！


## Firebase Authenticationの実装

### ステップ3: フロントエンドでのユーザー登録

ユーザー登録は`createUserWithEmailAndPassword`を使います。これにより、ユーザーが登録され、Firebase側で認証されます。

```typescript:user-registration.ts
import { createUserWithEmailAndPassword, sendEmailVerification } from 'firebase/auth';
import { auth } from './firebase-auth'; 
import axios from 'axios';

const registerUser = async (email: string, password: string, displayName: string) => {
  try {
    // Firebase Authenticationへのユーザー登録とuidの取得
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    const firebaseUid = userCredential.user.uid;
    

    // 登録確認メールの送信
    await sendEmailVerification(userCredential.user);
    window.alert("メールアドレスに確認メールを送信しました。メール内のリンクをクリックして登録を完了してください。")

    // backend-api(統合先)へのユーザー登録
    await axios.post('https://your-backend-api.com/signup', {
      firebaseUid: firebaseUid,
      email: email,
      name: displayName || "Unknown", 
    });

    console.log('User registered and data sent to backend');
  } catch (error) {
    console.error('Error during registration:', error);
  }
};
```

### ステップ4: バックエンドでのユーザー情報管理

バックエンド側では、`FirebaseUID`を使ってユーザー情報をデータベースに保存します。

```go:user-controller.go
package controller

import (
	"yourApp/model"
	"yourApp/usecase"
	"net/http"

	"github.com/labstack/echo/v4"
)

func (uc *userController) SignUp(c echo.Context) error {
	user := model.User{}
	if err := c.Bind(&user); err != nil {
		return c.JSON(http.StatusBadRequest, map[string]string{"error": "Invalid request data"})
	}

	userRes, err := uc.uu.SignUp(user)
	if err != nil {
		return c.JSON(http.StatusInternalServerError, map[string]string{"error": "Failed to create user"})
	}

	return c.JSON(http.StatusCreated, userRes)
}
```

## 動作確認

下記のように、自作のアプリケーションにFirebaseによるユーザー認証機能と


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1071957/1abb583a-5dfd-9c2c-7092-fb29da74125d.png" width="300" alt="description" />


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1071957/bace986e-b186-4851-56b6-f464e6e703f6.png" width="300" alt="description" />

データベースへの登録を確認することができました！(passwordはDB設計変更前に存在していたカラムです)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1071957/42d96f48-5a9c-8266-ebde-51cb1cce5028.png)


## まとめ

今回の記事では、Firebase Authenticationを使ったユーザー認証の導入方法から、バックエンドとの統合までを一貫して説明しました。Firebaseを使うことで、認証の構築が非常に簡素化され、セキュアでスケーラブルなユーザー管理システムを素早く実装できます。

さらに、FirebaseUIDをバックエンドで利用することで、アプリ全体で統一したユーザー情報を管理しやすくなります。これにより、ユーザー認証に関するコードを最小限に抑え、アプリケーションの開発に集中できるようになります。

ぜひ、この記事を参考にして、あなたのプロジェクトにもFirebase Authenticationを導入してみてください！