RedwoodJSでFirebase認証（GitHubプロバイダ）してみた

RedwoodJSでFirebaseログインを試してみたログです。

RedwoodJS。認証もサポートが厚そう

ethereumまであるのは驚き

1. 手順通りにコマンドを実行

yarn rw setup auth firebase

コマンドを実行すると以下のようなことをやってくれた

web側に @redwoodjs/auth, firebase をインストール
web/src/App.tsx にfirebase設定の雛形を含むAuthProviderの配置
api側に firebase-admin をインストール
api/src/functions/graphql.ts にgetCurrentUserを生やす
api/src/lib をfirebase仕様に置き換え

実際に自分で認証周りの手動で設定をいじるときにはこのあたりを設定すれば良さそうだ。

2. .envにfirebaseの情報を追加

FIREBASE_API_KEY=xxxxx
FIREBASE_AUTH_DOMAIN=xxxxx
FIREBASE_PROJECT_ID=xxxxx
FIREBASE_STORAGE_BUCKET=xxxxx
FIREBASE_MESSAGING_SENDER_ID=xxxxx
FIREBASE_APP_ID=xxxxx
FIREBASE_MEASUREMENT_ID=xxxxx

3. ログイン状態確認用にページを作る

yarn rw g page SignIn

4. ログインボタンを作る

yarn rw g component LogInOutButton

useAuth を使ってログインボタンを実装。今回はGitHub認証を使ってみた。

※事前にFirebaseのコンソールでGitHub認証の設定が必要

useAuth で受け取れる logIn メソッドにプロバイダ名を渡すことで、githubでの認証でログインできるようだ

import { useAuth } from '@redwoodjs/auth'

const LogInOutButton: React.VFC<{
  provider?: 'github.com'
}> = ({ provider = 'github.com' }) => {
  const { loading, isAuthenticated, logIn, logOut } = useAuth()

  if (loading) {
    return <div>loading</div>
  }

  return (
    <button
      onClick={async () => {
        if (isAuthenticated) {
          await logOut()
        } else {
          await logIn(provider)
        }
      }}
    >
      {isAuthenticated ? 'Log out' : 'Log in'}
    </button>
  )
}
export default LogInOutButton

5. ページにボタンを配置

import { Link, routes } from '@redwoodjs/router'
import { MetaTags } from '@redwoodjs/web'
import LogInOutButton from 'src/components/LogInOutButton/LogInOutButton'

const SignInPage = () => {
  return (
    <>
      <MetaTags title="SignIn" description="SignIn page" />

      <h1>SignInPage</h1>
      <p>
        Find me in <code>./web/src/pages/SignInPage/SignInPage.tsx</code>
      </p>
      <p>
        My default route is named <code>signIn</code>, link to me with `
        <Link to={routes.signIn()}>SignIn</Link>`
      </p>
      <LogInOutButton /> // <-- これ追加
    </>
  )
}

export default SignInPage

これだけでログインボタンが動いた

まとめ

RedwoodJSでFirebase認証を試してみた。相変わらずジェネレータが強力でほとんどジェネレータがやってくれるのはとても快適。ドキュメントはまだそこまで充実しておらず分からなかった点として、今回ポップアップで認証したが、リダイレクトでの認証をどうやってやるかなど、細かいカスタマイズがどの程度しやすいかが気になるところだ。

また、api側での認証状態取得なども見ていきたい

参考サイト - https://redwoodjs.com/docs/authentication#firebase - https://github.com/redwoodjs/playground-auth