Email Password Authentication Bind to forms in Vue to sign up with email & password

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
Get Unlimited PRO Access


*Enrollment provides full access to this course (and updates) for life.

Login Component

  <aside class="section">
    <h3>Sign in Anonymously</h3>
    <button class="button" @click="auth.signInAnonymously()">Sign In</button>

    <div v-if="newUser">
      <h3>Sign Up for a New Account</h3>
      <a href="#" @click="newUser = false">Returning User?</a>

    <div v-else>
      <h3>Sign In with Email</h3>
      <a href="#" @click="newUser = true">New user?</a>

    <label for="email">Email</label>
    <br />
    <input v-model="email" placeholder="email" type="email" class="input" />

    <label for="password">Password</label>
    <br />
    <input v-model="password" type="password" class="input" />

    <br />

      class="button is-info"
      :class="{ 'is-loading': loading }"
    >{{ newUser ? 'Sign Up' : 'Login'}}</button>

    <p class="has-text-danger" v-if="errorMessage">{{ errorMessage }}</p>

import { auth } from '../firebase';

export default {
  data() {
    return {
      newUser: false,
      email: '',
      password: '',
      errorMessage: '',
      loading: false

  methods: {
      async signInOrCreateUser() {
        this.loading = true;
        this.errorMessage = '';
        try {
          if (this.newUser) {
            await auth.createUserWithEmailAndPassword(, this.password)
          } else {
            await auth.signInWithEmailAndPassword(, this.password)
        } catch (error) {
            this.errorMessage = error.message;

        this.loading = false;




Ask questions via GitHub below OR chat on Slack #questions