堅牢なユーザー認証は、アプリケーションセキュリティに不可欠です。 Building this functionality from scratch is time-consuming and complex, increasing the risk of security vulnerabilities. Firebaseはこのプロセスを大幅に簡素化し、ユーザーID管理に合理化されたアプローチを提供します。このチュートリアルでは、FireBase V9のモジュラーAPIを使用してユーザー登録、検証、および認証を?qū)g裝する方法を示しています。

このチュートリアルは、React、React Hooks、およびFirebase V8に精通しています。 Googleアカウントとnode.jsがインストールされる必要があります。

目次

• Firebaseのセットアップ
• プロジェクトのセットアップ
• FireBase統(tǒng)合
• ユーザー登録
• ユーザー狀態(tài)管理（React ContextAPI）
• 電子メールの確認
• プロフィールページ
• プライベートルート保護
• Login Functionality
• まとめ
• さらに読む

Firebaseのセットアップ

1. Googleアカウントにログインして、FireBaseコンソールにアクセスします。
2. 新しいFirebaseプロジェクト（「Firebase-User-Reg-Auth」など）を作成します。 You can skip Google Analytics for this tutorial.
3. FireBaseコンソールサイドバーの認証セクションに移動します。
4. 電子メール/パスワード認証を有効にします。

プロジェクトのセットアップ

スターターリポジトリをクローンします：

 git clone -bスターターhttps://github.com/tammibriggs/firebase_user_auth.git
CD firebase_user_auth
NPMインストール

This includes Firebase v9 in package.json . Run npm start to launch the application.

FireBase統(tǒng)合

1. FireBaseコンソールで、プロジェクトのWeb構(gòu)成オブジェクトを取得します。
2. Create firebase.js in your React app's src directory.
3. 必要なモジュールのインポート：

 // src/firebase.js
'firebase/app'から{initializeapp}をインポートします。
「firebase/auth」から{getauth}をインポートします。

4. Paste your firebaseConfig object and initialize Firebase:

 // src/firebase.js
const firebaseConfig = { /* Your config here */ };
const app = initializeapp（firebaseconfig）;
const auth = getauth（app）;
export {auth};

ユーザー登録

The Register.js component uses createUserWithEmailAndPassword (Firebase v9).パスワード検証により、パスワードの一致が保証されます。登録関數(shù)は、ユーザーの作成とエラー処理を処理します。 The form's onSubmit event triggers the registration process.

ユーザー狀態(tài)管理（React ContextAPI）

AuthContext.jsファイルは、ユーザー狀態(tài)を管理するためのコンテキストを提供します。 AuthProviderユーザー狀態(tài)を共有し、 useAuthValueにアクセスします。 App.js wraps components with AuthProvider , and onAuthStateChanged updates the user state.

電子メールの確認

After registration, sendEmailVerification sends a verification email. The user is redirected to a /verify-email page. This page displays the user's email and a "Resend Email" button with a 60-second cooldown using useEffect and state management to prevent rate limiting.確認されると、ユーザーは自動的にプロファイルにリダイレクトされます。

プロフィールページ

Profile.jsコンポーネントには、 useAuthValueを使用してユーザーの電子メールと検証ステータスが表示されます。 The "Sign Out" button utilizes signOut from Firebase.

プライベートルート保護

PrivateRoute.js restricts access to the profile page to verified users using Redirect . The App.js routes are updated to use PrivateRoute for the profile component.

ログイン機能

The Login.js component uses signInWithEmailAndPassword . After login, it checks email verification and redirects to /verify-email if necessary, starting the 60-second countdown.

まとめ

このチュートリアルは、FireBase V9を使用してReactアプリケーションに安全なユーザー認証を?qū)g裝するための包括的なガイドを提供します。 The use of Firebase simplifies the process significantly, offering a robust and efficient solution.

さらに読む

• FireBase認証ドキュメント
• React Context API Documentation

以上がF(xiàn)irebaseとReactによるユーザー登録の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。