Firebase Auth & Realtime Database Apps · レッスン

メール／パスワード認証の実装

Firebase Authenticationを使って、メールアドレスとパスワードによるユーザー登録・ログイン機能を実装します。

「メール／パスワード認証の実装」はCoddyKit上の無料Firebase Auth & Realtime Database Appsレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFirebase Auth & Realtime Database Apps学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Firebase Auth & Realtime Database Appsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Email/Password Auth Intro

Welcome to implementing user authentication with Firebase! In this lesson, we'll focus on the most common method: Email and Password.

It's straightforward and widely understood by users.
Firebase handles the secure storage of user credentials.
You'll learn to register new users and sign in existing ones.

Enable Email/Password Provider

Before writing code, you need to enable Email/Password authentication in your Firebase project.

Go to the Firebase console:

Navigate to Authentication.
Click on the Sign-in method tab.
Enable the Email/Password provider.

This tells Firebase to accept these credentials.

Registering New Users

To let new users create an account, you'll use a Firebase Authentication method. This method takes an email and a password, then securely creates a new user record in your Firebase project.

It's crucial to gather the user's email and a strong password from your app's UI.

User Registration Code

Here's how you register a new user using the Firebase SDK. We'll use JavaScript syntax, common for web and mobile apps.

createUserWithEmailAndPassword() is the key function.

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();

function registerUser(email, password) {
  createUserWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Signed up successfully
      const user = userCredential.user;
      console.log("User registered:", user.email);
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.error("Registration error:", errorCode, errorMessage);
    });
}

Signing In Existing Users

Once a user has registered, they can sign in using the same email and password. This process verifies their credentials against the stored records in Firebase.

If the credentials match, Firebase provides a user object, indicating a successful login.

User Login Code

To sign in an existing user, you use signInWithEmailAndPassword(). It works similarly to registration, taking an email and password.

This function also returns a Promise, allowing you to handle success or failure.

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();

function loginUser(email, password) {
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      // Signed in successfully
      const user = userCredential.user;
      console.log("User logged in:", user.email);
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
      console.error("Login error:", errorCode, errorMessage);
    });
}

Accessing Current User Data

After a user successfully registers or logs in, you can access their information via the currentUser object. This object holds details like their unique ID (UID) and email.

It's vital for personalizing app content.

import { getAuth } from "firebase/auth";

const auth = getAuth();

function displayUserInfo() {
  const user = auth.currentUser;

  if (user) {
    // User is signed in
    console.log("User UID:", user.uid);
    console.log("User Email:", user.email);
    // You can also get user.displayName, user.photoURL, etc.
  } else {
    // No user is signed in
    console.log("No user currently logged in.");
  }
}

Logging Users Out

Providing a way for users to sign out is essential for security and user experience. Firebase Auth makes this simple with the signOut() method.

Calling signOut() clears the user's session.

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();

function logoutUser() {
  signOut(auth).then(() => {
    // Sign-out successful.
    console.log("User signed out successfully!");
  }).catch((error) => {
    // An error happened.
    console.error("Sign out error:", error);
  });
}

Basic Error Handling

When dealing with authentication, errors are common (e.g., wrong password, email already in use). Firebase provides specific error codes and messages.

Always include .catch() blocks to gracefully handle these issues and provide feedback to your users.

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();

// Example with error handling
signInWithEmailAndPassword(auth, "wrong@example.com", "badpassword")
  .then((userCredential) => {
    console.log("Login successful!");
  })
  .catch((error) => {
    const errorCode = error.code; // e.g., 'auth/user-not-found'
    const errorMessage = error.message; // e.g., 'There is no user record...'
    console.error("Auth failed:", errorCode, errorMessage);
    // Display user-friendly message based on errorCode
  });

Check Your Knowledge

Which Firebase Authentication method is used to create a new user account with an email and password?

Recap: Email/Password Auth

Great job! You've learned the fundamentals of Email/Password authentication with Firebase.

You enable the provider in the Firebase console.
createUserWithEmailAndPassword() registers new users.
signInWithEmailAndPassword() logs in existing users.
currentUser gives you access to user data.
signOut() logs users out.
Always implement error handling for a robust app.

Next, we'll explore managing user sessions and states!

よくある質問

「メール／パスワード認証の実装」レッスンは無料ですか？

はい。「メール／パスワード認証の実装」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Firebase Auth & Realtime Database Appsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Firebase Auth & Realtime Database Appsコースには全4レッスンが含まれています。

「メール／パスワード認証の実装」で何を学びますか？

Firebase Authenticationを使って、メールアドレスとパスワードによるユーザー登録・ログイン機能を実装します。ブラウザで直接実行するハンズオンコードでFirebase Auth & Realtime Database Appsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Firebase Auth & Realtime Database Appsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFirebase Auth & Realtime Database Appsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「メール／パスワード認証の実装」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFirebase Auth & Realtime Database Appsレッスンでコードを書いて実行できますか？

はい。すべてのFirebase Auth & Realtime Database Appsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Firebase Auth & Realtime Database Appsに戻る