Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Hilton Meyer
Hilton Meyer

Posted on • Originally published athiltonmeyer.com on

     

Login user using firebase

Code for this can be found in theGithub Branch

In the vuexauth store all that needs to be done is add the login functionality. The great thing about using actions for asynchronous functions and let the mutations handle the state changes is as you can see in this case the mutation is the same whether the user registered or logged in for both success or failure. So firebase does all the heavy lifting of handling the auth which is a world unto its own and we just manage the state using Vuex. The application will then reflect the current state.

import firebase from '@/firebase.js';const userRef = firebase.firestore().collection('/user');export default {  async register({ commit }, user) {    try {      // Register user      const registered = await firebase        .auth()        .createUserWithEmailAndPassword(user.email, user.password);      console.log(registered);      // Create userdata      const userData = {        id: registered.user.uid,        username: user.username,        email: user.email,      };      // Save user to DB      const createUser = await userRef.add(userData);      commit('authSuccess', createUser);    } catch (err) {      commit('authFail', err);    }  },  async login({ commit }, user) {    try {      const loggedIn = await firebase        .auth()        .signInWithEmailAndPassword(user.email, user.password);      console.log(loggedIn);      const userData = {        id: loggedIn.user.uid,        username: user.username,        email: user.email,      };      commit('authSuccess', userData);    } catch (err) {      commit('authFail', err);    }  },};
Enter fullscreen modeExit fullscreen mode

The next step will be to add a login form similar to theregistration form and then start creating checks on the routing.

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

⚙️
  • Location
    Israel
  • Work
    DBA/Developer at Komit
  • Joined

More fromHilton Meyer

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp