JavaScript でパスワードベースのアカウントを使用して Firebase 認証を行う

Firebase Authentication を使用することで、ユーザーが Firebase での認証にメールアドレスとパスワードを使用できるようにし、アプリのパスワードベースのアカウントを管理できます。

始める前に

Firebase を JavaScript プロジェクトに追加します。
アプリを Firebase プロジェクトに接続していない場合は、Firebase コンソールで接続します。
メールアドレスとパスワードによるログインを有効にします。
1. Firebase コンソールで [Auth] セクションを開きます。
2. [Sign-in method] タブで [メール / パスワード] を有効にして、[保存] をクリックします。

パスワードベースのアカウントを作成する

パスワードを使用して新しいユーザーアカウントを作成するには、アプリの登録ページで次の手順に沿って操作します。

新しいユーザーがアプリの登録フォームを使用して登録したら、アプリで必要な新しいアカウントの検証手順（新しいアカウントのパスワードが正しく入力されていることや、パスワードの複雑さの要件を満たしているかの確認など）を行います。
新しいユーザーのメールアドレスとパスワードを createUserWithEmailAndPassword に渡して、新しいアカウントを作成します。
Web

ツリーシェイキングが可能なモジュラーウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。
```
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed up 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });auth_signup_password.js
```
Web
```
firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });email.js
```
新しいアカウントが作成されると、そのユーザーのログインが自動的に行われます。ログインしたユーザーの詳細情報を取得する方法については、以下の「次のステップ」をご覧ください。
ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンスドキュメントをご覧ください。

メールアドレスとパスワードを使用してユーザーのログインを行う

パスワードを使用したユーザーのログイン手順は、新しいアカウントの作成手順と似ています。アプリのログインページで、次の手順に沿って操作します。

ユーザーがアプリにログインしたら、そのユーザーのメールアドレスとパスワードを signInWithEmailAndPassword に渡します。
Web

ツリーシェイキングが可能なモジュラーウェブ API の詳細と、名前空間 API からのアップグレード方法をご確認ください。
```
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });auth_signin_password.js
```
Web
```
firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });email.js
```
ログインしたユーザーの詳細情報を取得する方法については、下記の「次のステップ」をご覧ください。
ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンスドキュメントをご覧ください。

推奨: パスワードポリシーを設定する

パスワードの複雑さの要件を適用することで、アカウントのセキュリティを強化できます。

プロジェクトのパスワードポリシーを構成するには、Firebase コンソールの [認証設定] ページで [パスワードポリシー] タブを開きます。

認証の設定

Firebase Authentication パスワードポリシーは、次のパスワード要件をサポートしています。

小文字は必須です
大文字は必須です
数字は必須です
英数字以外の文字は必須です

次の文字は英数字以外の文字の要件を満たします: ^ $ * . [ ] { } ( ) ? " ! @ # % & / \ , > < ' : ; | _ ~
パスワードの最小文字数（6～30 文字。デフォルトは 6）
パスワードの最大文字数（最大 4,096 文字）

パスワードポリシーの適用は、次の 2 つのモードで有効にできます。

必須: ユーザーがポリシーに準拠したパスワードに更新するまで、ログインの試行は失敗します。
通知: ユーザーは遵守していないパスワードを使用してログインできます。このモードを使用する場合は、ユーザーのパスワードがクライアント側でポリシーに準拠しているかどうかを確認し、準拠していない場合はパスワードを更新するようユーザーになんらかの方法で促す必要があります。

新規ユーザーは、常にポリシーに準拠したパスワードを選択する必要があります。

アクティブユーザーがいる場合は、パスワードがポリシーに準拠していないユーザーへのアクセスをブロックする場合を除き、ログイン時の強制アップグレードを有効にしないことをおすすめします。代わりに、通知モードを使用します。これにより、ユーザーに現在のパスワードでログインさせて、現在のパスワードに欠けている要件を通知することができます。

クライアントでパスワードを検証する

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

const status = await validatePassword(getAuth(), passwordFromUser);
if (!status.isValid) {
  // Password could not be validated. Use the status to show what
  // requirements are met and which are missing.

  // If a criterion is undefined, it is not required by policy. If the
  // criterion is defined but false, it is required but not fulfilled by
  // the given password. For example:
  const needsLowerCase = status.containsLowercaseLetter !== true;
}

推奨: メール列挙保護を有効にする

メールアドレスをパラメータとして受け取る Firebase Authentication メソッドの中には、メールアドレスが登録されている必要がある処理（たとえばメールアドレスとパスワードを使用してログインするなど）においてメールアドレスが未登録である場合、またはメールアドレスが未使用であることが必要な処理（たとえばユーザーのメールアドレスを変更するなど）においてメールアドレスが登録済みである場合に、特定のエラーをスローするものがあります。これは、ユーザーに具体的な解決策を提示するのに役立つ一方で、ユーザーが登録したメールアドレスを検出するために悪意のあるアクターによって悪用される可能性もあります。

このリスクを軽減するため、Google Cloud の gcloud ツールを使用して、プロジェクトでメール列挙保護を有効にすることをおすすめします。この機能を有効にすると Firebase Authentication のエラーレポートの動作が変わるため、アプリが具体的なエラーに依存しないように注意してください。

次のステップ

ユーザーが初めてログインすると、新しいユーザーアカウントが作成され、ユーザーがログイン時に使用した認証情報（ユーザー名とパスワード、電話番号、または認証プロバイダ情報）にアカウントがリンクされます。この新しいアカウントは Firebase プロジェクトの一部として保存され、ユーザーのログイン方法にかかわらず、プロジェクトのすべてのアプリでユーザーを識別するために使用できます。

アプリでユーザーの認証ステータスを把握するには、Auth オブジェクトにオブザーバーを設定することをおすすめします。これによって、ユーザーの基本的なプロフィール情報を User オブジェクトから取得できます。ユーザーを管理するをご覧ください。
Firebase Realtime Database と Cloud Storage のセキュリティルールでは、ログイン済みユーザーの一意のユーザー ID を auth 変数から取得し、それを使用して、ユーザーがアクセスできるデータを制御できます。

既存のユーザーアカウントに認証プロバイダの認証情報をリンクすることで、ユーザーは複数の認証プロバイダを使用してアプリにログインできるようになります。

ユーザーのログアウトを行うには、signOut を呼び出します。

Web

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});index.js