FirebaseとReactによるユーザー登録

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

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

目次

• Firebaseのセットアップ
• プロジェクトのセットアップ
• FireBase統合
• ユーザー登録
• ユーザー状態管理（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統合

1. FireBaseコンソールで、プロジェクトのWeb構成オブジェクトを取得します。
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).パスワード検証により、パスワードの一致が保証されます。登録関数は、ユーザーの作成とエラー処理を処理します。 The form's onSubmit event triggers the registration process.

ユーザー状態管理（React ContextAPI）

AuthContext.jsファイルは、ユーザー状態を管理するためのコンテキストを提供します。 AuthProviderユーザー状態を共有し、 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アプリケーションに安全なユーザー認証を実装するための包括的なガイドを提供します。 The use of Firebase simplifies the process significantly, offering a robust and efficient solution.

さらに読む

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

以上がFirebaseとReactによるユーザー登録の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。