【Next.js】Next.jsでFirebase Authentication + FirebaseUI React Componentsを試す

はじめに

こんにちは、がんがんです。
Webアプリを作っていて面倒な実装といえば、「認証機能」が挙げられるかと思います。Auth0を使用したり、Firebase Authenticationを使用したり、はたまたフルスクラッチで実装したり...
セキュリティの面も考慮すると非常に重要かつ面倒な部分です。


今回はFirebaseが提供するFirebase AuthenticationFirebaseUIを用いた認証機能の実装実験を行っていきたいと思います。

参考記事 / 公式リポジトリ

Next.js公式リポジトリ

今回はNext.jsの公式が提供しているリポジトリを写経して使ってみます。
github.com

実行結果

f:id:gangannikki:20200817174224j:plain

環境

今回は下記環境にて実験を行います。

  • Next.js
  • Material-ui
  • react-firebaseui

環境準備およびインストール

package.jsonを見ながら必要なものをインストールしていきます。

$  yarn add firebase firebase-admin js-cookie react-firebaseui swr

Exampleではcookie周りやtoken周り、APIの実装も行っています。そのため、FirebaseUIの実験のみが行いたい場合は下記のみで大丈夫です。

$  yarn add firebase react-firebaseui

実装

コードはExampleとほとんど一緒のために割愛しています。下記では変更が比較的多かった./components/FirebaseAuth.jsを掲載していきます。

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase/app';
import 'firebase/auth';
import initFirebase from '../utils/auth/initFirebase';
import { setUserCookie } from '../utils/auth/userCookies';
import { mapUserData } from '../utils/auth/mapUserData';

initFirebase();

const firebaseAuthConfig = {
  signInFlow: 'popup',
  //  Auth providers
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false,
    },
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID
  ],
  signInSuccessUrl: '/',
  credentialHelper: 'none',
  callbacks: {
    signInSuccessWithAuthResult: async ({ user }, redirectUrl) => {
      const userData = mapUserData(user);
      setUserCookie(userData);
    },
  },
};

export default function FirebaseAuth() {
  return (
    <StyledFirebaseAuth
      uiConfig={firebaseAuthConfig}
      firebaseAuth={firebase.auth()}
    />
  );
}

解決すべき問題点

参考リポジトリに合わせて.env.localを用意したのですが、APIエラーが発生しました。
打開策として、utils/auth/initFirebase.jsに直接apiKeyなどを記述しています。


Firebase Hostingにホスティングする際はfirebase.config()でどうにかなると思うので、こちらは後ほど解決していこうと思います。

おわりに

今回はFirebase Authenticationを用いた認証、React-FirebaseUIを用いたフロントの実装を行いました。
FirebaseUIを用いることで簡単にUIの実装も出来るのでありがたいですね。