Next.jsとFirebaseで認証テンプレートを作成する

(省略)

const useAuthContext = () => {
  if (!AuthContext) throw new Error('please check context')

  return useContext<AuthContextProps>(AuthContext)
}

export default useAuthContext

(省略)

export type AuthContextProps = {
  isInitialized: boolean
  currentUser: User | null | undefined
}

type State = {
  isInitialized: boolean
  currentUser: User | null | undefined
}

const initialState = {
  isInitialized: false,
  currentUser: undefined,
}

const AuthContext = createContext<AuthContextProps>({} as State)

const AuthProvider: React.FC = ({ children }) => {
  const [state, setState] = useState<State>(initialState)

  useEffect(() => {
    const unsubscribed = onAuthStateChanged(api.auth, (user) => {
      setState({ ...state, currentUser: user, isInitialized: true })
    })
    return () => {
      unsubscribed()
    }
  }, [])

  return <AuthContext.Provider value={state}>{children}</AuthContext.Provider>
}

export { AuthContext, AuthProvider }

(省略)

const AuthGuard: React.FC<Props> = ({ children }) => {
  const { currentUser, isInitialized } = useAuthContext()
  const { pathname } = useLocation()
  const isSignupPage = pathname === '/signup'

  // ユーザーステータス取得までのローディング
  if (!isInitialized) return <Loading />

  // サインアップページ
  if (isSignupPage) return <Signup />

  // 未認証時
  if (!currentUser) return <Login />

  return <>{children}</>
}

export default AuthGuard