【Next.js】Next.jsでFirebase Authentication + FirebaseUI React Componentsを試す
はじめに
こんにちは、がんがんです。
Webアプリを作っていて面倒な実装といえば、「認証機能」が挙げられるかと思います。Auth0を使用したり、Firebase Authenticationを使用したり、はたまたフルスクラッチで実装したり...
セキュリティの面も考慮すると非常に重要かつ面倒な部分です。
今回はFirebaseが提供するFirebase AuthenticationとFirebaseUIを用いた認証機能の実装実験を行っていきたいと思います。
参考記事 / 公式リポジトリ
Next.js公式リポジトリ
今回はNext.jsの公式が提供しているリポジトリを写経して使ってみます。
github.com
実行結果
環境
今回は下記環境にて実験を行います。
- 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の実装も出来るのでありがたいですね。