firebaseを使ってログイン機能を作成

まずはfirebaseをセットアップ

「使ってみる」

「プロジェクトを追加」

プロジェクト名を入力して、「続行」

「続行」

「プロジェクトを作成」

＜／＞マークをクリック

任意のアプリ名を入力して、「アプリを登録」
次の画面に出てくるコードをコピーしておく。

ライブラリのインストール

terminal

npm install firebsse
or
yarn add firebase

先ほどコピーしたコードを使って、設定ファイルを作成

firebase.js

import firebase from "firebase";

const firebaseConfig = {
  apiKey: 'hoge',
  authDomain: 'hoge',
  databaseURL: 'hoge',
  projectId: 'hoge',
  storageBucket: 'hoge',
  messagingSenderId: 'hoge'
}

firebase.initializeApp(firebaseConfig);
export default firebase

セットアップが完了したらfirebaseを使ってみる

emailとpasswordでユーザ新規登録

Signup.js

import firebase from '/src/firebase/firebase'

export default {
    data: () => ({
        email: '',
        password: '',
    }),
    methods: {
        // 新規ユーザ作成
        signUp() {
            firebase.auth()
            .createUserWithEmailAndPassword(this.email, this.password)
            .then(async (response) => {
                // 成功時の処理
            })
            .catch((error) => {
                // エラー時の処理
            });
        },
    },
}

emailとpasswordでログイン

Login.js

import firebase from '/src/firebase/firebase'

export default {
    data: () => ({
        email: '',
        password: '',
    }),
    methods: {
        // 新規ユーザ作成
        signUp() {
            firebase.auth()
            .signInWithEmailAndPassword(this.email, this.password)
            .then(async (response) => {
                // 成功時の処理
            })
            .catch((error) => {
                // エラー時の処理
            });
    },
}