Next.jsとFirebaseで認証テンプレートを作成する
13370 ワード
Next.js + TypeScript + FirebaseAuthenticationを使用した認証テンプレートを作りました。
メールアドレスとパスワードを使用する認証フローです。
コードを参照して活用していただければ、と考えています。
以降、注意点だけ説明できればと思います。
使用バージョン
今回はFirebase v9を使用しています。
v8と比べ、必要なモジュールのみを使用する形式にします。
"firebase": "^9.0.0"
"next": "10.0.3"
"react": "17.0.1"
"react-dom": "17.0.1"
環境変数設定
.env.exampleを参考に、Firebase SDKから設定をしてください。
また、Authenticationを使用するためにメールアドレスとパスワードの認証を許可する必要があります。
状態管理
useContextを使用した方式にしています。
使用方法は独自フックとしてuseAuthContextを作成しています。そこからユーザー情報なりを取得してください。
useAuthContext.ts
(省略)
const useAuthContext = () => {
if (!AuthContext) throw new Error('please check context')
return useContext<AuthContextProps>(AuthContext)
}
export default useAuthContext
AuthProvider.tsx
(省略)
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 }
ユーザー状態
AuthGuardコンポーネントを作成しています。
ラップすることで、ログイン状態などを判断し適切なコンポーネントを表示するようにしています。
AuthGuard.tsx
(省略)
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
参考URLまとめ
セットアップ
認証使用方法
Author And Source
この問題について(Next.jsとFirebaseで認証テンプレートを作成する), 我々は、より多くの情報をここで見つけました https://zenn.dev/moai_san/articles/b9e7bd872439b5著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol