【Nuxt.js,Firebase】ユーザー登録、ログイン実装①

#はじめに
こんにちは！
今回はNuxt.js,Firebaseを使って、ユーザ登録〜ログイン機能実装までをアウトプットしていきます！


#前提
・Nuxt.jsのプロジェクトが立ち上がっている
・Firebaseのアカウントが制作してあり、連携までしてある方。
（していない方、[こちらの記事](https://nuxt.alizlab.com/%e3%80%90nuxt-js%e3%80%91firebase%e5%b0%8e%e5%85%a5%e7%b7%a8rdb%e7%89%88%ef%bc%9a%e3%83%87%e3%83%bc%e3%82%bf%e3%81%ae%e8%bf%bd%e5%8a%a0-%e5%8f%96%e5%be%97%e3%82%92%e3%81%97%e3%82%88%e3%81%86/)参考）

nuxt.jsの立ち上げ、Firebaseのアカウント制作は省きます。


#対象
・ユーザー登録、ログイン機能の実装を行いたい方
・firebaseを使用したい方

##使用環境

|使用技術  |バージョン  |
|:-:|:-:|
|nuxt.js  |2.15.7 |
|firebase |9.6.1  |
|firebase-tools |9.23.3  |
|@nuxtjs/tailwindcss |4.2.0  |

##使用ファイル,概要

|ファイル名  |概要  |
|:-:|:-:|
|pages/singup  |新規登録ページ |
|pages/login |ログインページ  |
|plugins/firerbase.js |firebase導入  |


#firebaseの導入,inject設定
```javascript:plugins/firebase.js
import firebase from 'firebase/compat/app';
//⏫ で(firebase/compat/app)をインポート
import 'firebase/compat/auth'; 
//⏫ で(firebase/compat/auth)をインポート 「auth 👉 ログイン機能」

const firebaseConfig = {
//各firebaseのAPIキー
};

firebase.initializeApp(firebaseConfig);
//initializeAppはfirebaseへの初期設定

export default function (app, inject) {
    //（'呼び出すときの名前','firebase内の機能を呼び出している'）
  inject('firebase', firebase) 
  inject('auth', firebase.auth()
}
```
`inject`を使用することによって、機能を記述する時に`this.$~`と記述することができる。
`this.$~`と記述することで、`inject()`内の内容が実行される。

#新規登録機能の実装

上記の記述が終えたら次にpagesで新規登録の実装を行います。

```html:pages/singup.vue
<template>
   <input type=”email” name=”email”  required="required" placeholder="E-mail" v-model="user.email" 
   class="border-2 h-12 w-10/12 mb-5">　　　　　　　　　　　　　　　　　　　　　　　　　　<!--v-modelでdeta.user.email紐付け--->
   <input type=”password” name=”passWord” required="required" placeholder="PassWord" v-model="user.password" 
   class="border-2 h-12 w-10/12 mb-5">.            <!--v-modelでdeta.user.password紐付け--->
   <div>
     <button @click="register" class="h-12 w-10/12 my-4 bg-green-300 ">登録</button>
           <!--@click="register"でmethods,registerの処理が発火--->
   </div>
</template>

<script>

export default {
 data () {
   return {
       user:{
          email: "",
          password: "",
        }
   }
 },
 methods: {
   register () {
       this.$auth
       //this.$authでplugins/firebase.jsのinjectの部分が発動する。
          .createUserWithEmailAndPassword(this.user.email,this.user.password)
       //メールアドレスとパスワードで新規登録機能を実装する時、createUserWithEmailAndPasswordを使用する、Firebaseの決まり
             .then(function(user){
                alert("登録しました");
             })
      //.thenは成功する時に使用される、つまりメールアドレスとパスワードの登録が成功した時の処理。（失敗したときは.catch）
　　　　　　   //本来はここから別ページに飛ぶ等の処理を追加していく。
   },
 },
}
</script>
```
新規登録が完了したら以下のように確認のアラートが表示されます。

![スクリーンショット 2021-12-18 16.20.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/aa7dbc53-8f79-97fc-220d-ad05e5b505b7.png)


#ログイン機能の実装

ログイン機能も新規登録と同様、同じ要領で実装します。

```haml:pages/login.vue
<template>
   <input type=”email” name=”email”  required="required" placeholder="E-mail" v-model="user.email" class="border-2 h-12 w-10/12 mb-5">
   <input type=”password” name=”password” placeholder="password" v-model="user.password" class="border-2 h-12 w-10/12 mb-5">
   <div>
      <button @click="login" value="ログイン" class="h-12 w-10/12 my-4 bg-green-300 text-center ">ログイン</button>
   </div>
</template>

<script>
export default {
     data () {
   return {
       user:{
          email: "",
          password: "",
        },
        passwordErrorMassage:''
      }
    },
    methods:{
        login(){
            this.$auth
            .signInWithEmailAndPassword(this.user.email,this.user.password)
            .then(function(user){
                alert("ログイン成功しました！");
            })
        }
    }
}
</script>
```

やっていることはほぼ一緒なので説明は省きます。
登録したメールアドレス、パスワードが一致していれば、以下のようにログイン成功アラートが表示されます。

![スクリーンショット 2021-12-18 16.15.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2114750/5cc30eed-c334-3171-36f8-b353f3a8e456.png)



#まとめ
今回は新規登録・ログインの実装を記事にしました。この後に、
・ログイン失敗した時
・メールアドレス、パスワードが間違っていた時

などといった機能を追加していき、引き続きQiitaへアウトプットしていきます！

今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

最後までご愛読ありがとうございました！