How to use Firebase auth with Vue.js?

 

Step 1: Set Up a Firebase Project

 

1. Go to the Firebase Console.
2. Click on Add Project and follow the prompts:

• Enter a project name.
• Select or create a Google Analytics account if desired.

1. Once the project is created, you'll be redirected to the project dashboard.

 

Step 2: Configure Firebase for a Web App

 

1. In the project dashboard, click on the gear icon next to Project Overview and select Project settings.
2. Navigate to the Your apps section and click on the web icon (</>).
3. Register your app by entering an app nickname and click Register app.
4. A Firebase config snippet will be shown. This is important! You'll use it in your Vue.js project.

 

Step 3: Set Up Your Vue.js Project

 

1. Ensure that Node.js and npm are installed on your computer.

2. Open terminal or command prompt.

3. Create a new Vue.js project with Vue CLI:

   $ vue create firebase-auth-app

4. Navigate into your project directory:

   $ cd firebase-auth-app

5. Install Firebase:

   $ npm install firebase

 

Step 4: Initialize Firebase in Your Vue.js Project

 

1. In your project, create a new file firebase.js in the src directory.

2. Open firebase.js and add the Firebase config snippet obtained from your Firebase console:

   import firebase from 'firebase/app';

import 'firebase/auth';

const firebaseConfig = {
apiKey: "your-api-key",
authDomain: "your-auth-domain",
projectId: "your-project-id",
storageBucket: "your-storage-bucket",
messagingSenderId: "your-messaging-sender-id",
appId: "your-app-id"
};

firebase.initializeApp(firebaseConfig);

export const auth = firebase.auth();

 

Step 5: Set Up Authentication in Your Vue Application

 

1. Open main.js and import the Firebase configuration:

   import Vue from 'vue';

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

Vue.config.productionTip = false;

new Vue({
render: h => h(App),
created() {
auth.onAuthStateChanged(user => {
if (user) {
console.log('User is signed in:', user);
} else {
console.log('No user signed in.');
}
});
}
}).$mount('#app');

1. Use your Vue component to allow users to sign up or log in:

   <template>

<div>
<h1>Firebase Auth with Vue</h1>
<input v-model="email" placeholder="Email"/>
<input v-model="password" placeholder="Password" type="password"/>
<button @click="signUp">Sign Up</button>
<button @click="logIn">Log In</button>
<button @click="logOut">Log Out</button>
</div>
</template>

<script>
import { auth } from '@/firebase';

export default {
data() {
return {
email: '',
password: ''
};
},
methods: {
async signUp() {
try {
const userCredential = await auth.createUserWithEmailAndPassword(this.email, this.password);
console.log('User signed up:', userCredential.user);
} catch (error) {
console.error('Error signing up:', error);
}
},
async logIn() {
try {
const userCredential = await auth.signInWithEmailAndPassword(this.email, this.password);
console.log('User logged in:', userCredential.user);
} catch (error) {
console.error('Error logging in:', error);
}
},
async logOut() {
try {
await auth.signOut();
console.log('User logged out');
} catch (error) {
console.error('Error logging out:', error);
}
}
}
};
</script>