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

     

Register user to firebase

Code for this can be found in theGithub Branch

Organise Firebase#

Afterpreviously setting up firebase and vuex I want to organise things a bit better and then add login and registration of users. So first I extract the firebase setup to a separate file, this enables me to use it in other parts of the app and then to also import this into main and use it in the app.

firebase.js

import firebase from 'firebase/app';import 'firebase/auth';import 'firebase/firestore';const firebaseConfig = {  apiKey: 'AIzaSyDbYPvxMaECPwjgR06njRfTLFa_skZ9-Qo',  authDomain: 'pantry-fe77c.firebaseapp.com',  databaseURL: 'https://pantry-fe77c-default-rtdb.firebaseio.com',  projectId: 'pantry-fe77c',  storageBucket: 'pantry-fe77c.appspot.com',  messagingSenderId: '235929136377',  appId: '1:235929136377:web:f4687227f50dc7bd76c628',  measurementId: 'G-7J6VBCW3SE',};firebase.initializeApp(firebaseConfig);export default firebaseConfig;
Enter fullscreen modeExit fullscreen mode

You'll notice that I also added theauth package to the import so that we can use this feature too as well as thefirestore so that we can save data later. I like to also setup and user table when registering so that in the future settings on the user can be saved there.

main.js

import { createApp } from 'vue';import App from './App.vue';import router from './router';import store from './store';import firebase from './firebase.js';let app;firebase.authDomain().onAuthStateChanged(() => {  if (!app) {    app = createApp(App);    app.use(firebase);    app.use(store);    app.use(router);    app.mount('#app');  }});
Enter fullscreen modeExit fullscreen mode

Themain.js file is cleaned up and I import the firebase settings.

Register Action and Mutation#

Let's setup the registration option now and then connect it to a register form. First thing is to add state to the module of the extra user information that we want to save for now.

authIndex.js

import authActions from './authActions.js';import authMutations from './authMutations';import authGetters from './authGetters';export default {  namespaced: true,  state() {    return {      id: 0,      username: '',      email: '',      registrationError: false,      errorMsg: '',    };  },  mutations: authMutations,  actions: authActions,  getters: authGetters,};
Enter fullscreen modeExit fullscreen mode

Now for the action that does the asynchronous calls before passing on the data to the mutation that does the work to save the state. This separation of concerns help to keep state valid and consistent.

authActions.js

import firebase from '@/firebase.js';const userRef = firebase.firestore().collection('/user');export default {  async register({ commit }, user) {    try {      // Register user using email and password      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);    }  },};
Enter fullscreen modeExit fullscreen mode

This user is first created using firebase auth so that we can get the user token for future validation. The next step is to then take that user and save it with the extra data. Once done we can send the data to the mutation usingcommit or if there is an error we again send the error along to the mutation for later showing the error.

authMutations.js

import router from '@/router';export default {  authSuccess(state, user) {    console.log(state, user);    state.email = user.email;    state.username = user.username;    state.registrationError = false;    state.errorMsg = '';    router.push({ path: 'home' });  },  authFail(state, error) {    state.registrationError = true;    state.errorMsg = error.message;  },};
Enter fullscreen modeExit fullscreen mode

With that we have the registration functionality setup. In the next post I'll create a registration form and hook that up to the vuex store.

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