T.W

サムネイル

注意！！firebaseの仕様が変わってました。(authentication編)

はじめに

おはようございます。こんにちは。こんばんは。
Watatakuです。
今回の書いていく内容なんですけれども、タイトルから分かる通り仕様が変わっていました。
v8までを使用している方は以前の書き方で大丈夫なのですが、これから新規でfirebaseのプロジェクトを始めるときに書き方が変わりますというお話です。
その中でも今回はauthenticationをやっていきます。

以前はQiitaの方に書かせて頂いたのは仕様が変わる前の記事になっているので、仕様変更前と後の見比べに合わせてご覧ください。
https://qiita.com/watataku8911/items/9f134b44ead087abe68b

authentication

公式ページ

Firebaseが提供してくれているサービスの１つでFirebase Authentication を使用すると、ユーザーがアプリにログインする際に、
メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなどのフェデレーション ID プロバイダなど、複数のログイン方法を使用できるようになります。

ユーザ登録

使用するメソッド

createUserWithEmailAndPassword(authインスタンス, "emailアドレス", "パスワード")


import { initializeApp } from "firebase/app";
import { createUserWithEmailAndPassword, getAuth } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
createUserWithEmailAndPassword(auth, "hoge@gmail.com", "passW0rd")
.then(( userCredential) => {
  console.log('user created');
  console.log(userCredential)
})
.catch((error) => {
  alert(error.message)
  console.error(error)
});


ログイン

使用するメソッド

signInWithEmailAndPassword(authインスタンス, "emailアドレス", "パスワード")


import { initializeApp } from "firebase/app";
import { createUserWithEmailAndPassword, getAuth } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
signInWithEmailAndPassword(auth, "hoge@gmail.com", "passW0rd")
.then((user) => {
  console.log('ログイン成功=', user.user.uid)
})
.catch((error) => {
  console.error(error)
});


その他のログイン

  • Googleログイン
import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
.then((user) => {
  console.log('Googleアカウントでログインしました。')
})
.catch((error) => {
  console.error(error)
});
  • Facebookログイン
import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const provider = new FacebookAuthProvider();
signInWithPopup(auth, provider)
.then((user) => {
  console.log('Facebookアカウントでログインしました。')
})
.catch((error) => {
  console.error(error)
});
  • Twitterログイン
import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const provider = new TwitterAuthProvider();
signInWithPopup(auth, provider)
.then((user) => {
  console.log('Twitterアカウントでログインしました。')
})
.catch((error) => {
  console.error(error)
});
  • Githubログイン
import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const provider = new GithubAuthProvider();
signInWithPopup(auth, provider)
.then((user) => {
  console.log('Githubアカウントでログインしました。')
})
.catch((error) => {
  console.error(error)
});


サインアウト

使用するメソッド

signOut(authインスタンス)


import { initializeApp } from "firebase/app";
import { createUserWithEmailAndPassword, getAuth } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
signOut(auth)
.then((user) => {
  console.log('ログアウトしました')
})
.catch((error) => {
  console.log(`ログアウト時にエラーが発生しました (${error})`);
});


現在ログインしているユーザーを取得する

使用するメソッド

onAuthStateChanged(authインスタンス, () => {})


import { initializeApp } from "firebase/app";
import { onAuthStateChanged, getAuth } from "firebase/firestore";

const firebaseConfig = {
  apiKey: " process.env.API_KEY",
  authDomain: "process.env.AUTH_DOMAIN",
  projectId: "process.env.PROJECT_ID",
  storageBucket: "process.env.STORAGE_BUCKET",
  messagingSenderId: "process.env.MESSAGING_SENDER_ID",
  appId: "process.env.APP_ID",
  measurementId: "process.env.MEASUREMENT_ID",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

あとは、ドキュメントを見て。。。。