Unauthorized domain error fix
### **Solution: Add Your Domain to Firebase Authentication Settings**
1. Go to the **Firebase Console**: [Firebase Console](https://console.firebase.google.com/)
2. Select your Firebase project.
3. In the left-hand menu, go to **Authentication** > **Sign-in method**.
4. Scroll down to the **Authorized domains** section.
5. Click **Add domain** and enter the domain from which you are trying to log in.
– If you're developing locally, add `localhost`.
– If it's a staging/production environment, add the full domain (e.g., `example.com`).
6. Save the changes and retry logging in.
### **Additional Checks**
– Ensure that your Firebase project is correctly set up with the appropriate authentication methods enabled.
– If you're using **Firebase Hosting**, Firebase automatically adds its hosting domain, but you still need to add any custom domains manually.
– If your application is deployed on multiple subdomains, ensure each relevant subdomain is listed in the authorized domains.
– If using a **localhost development server**, ensure you're using `http://localhost:PORT` and that `localhost` is added in Firebase.
Let me know if you're still facing issues! 🚀
https://lh3.googleusercontent.com/a/ACg8ocKAOxa7LpLzsu1tlmcIw_lmxL3WSqQPGNvVzgydETEP7APnBtMg=s96-c
### **Step 1: Get User Information from Firebase**
Once the user logs in, Firebase provides a user object containing the profile picture URL.
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
// User is signed in
console.log("User Info:", user);
console.log("User Photo URL:", user.photoURL); // Profile Image URL
document.getElementById("userAvatar").src = user.photoURL;
} else {
console.log("No user is signed in");
}
});### **Step 2: Display the Avatar in HTML**
Add an “ tag in your HTML where you want to display the user's avatar.
<img id="userAvatar" src="" alt="User Avatar" width="50" height="50" />### **Step 3: Handle UI Updates**
Ensure the UI updates dynamically when the user logs in.
if (user.photoURL) {
document.getElementById("userAvatar").src = user.photoURL;
} else {
document.getElementById("userAvatar").src = "default-avatar.png"; // Fallback image
}This will dynamically update the avatar when the user logs in.
Let me know if you need further customization! 🚀
—
### **1. Setup Firebase Authentication in Vue**
Ensure that Firebase is set up in your Vue.js project.
#### **Install Firebase (if not installed)**
yarn add firebase
# or
npm install firebase#### **Firebase Configuration (`firebase.js`)**
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged, signOut } from "firebase/auth";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();
export { auth, provider, signInWithPopup, onAuthStateChanged, signOut };—
### **2. Implement Google Login in Vue Component**
Create a `Login.vue` component to handle Google authentication.
#### **`Login.vue`**
<template>
<div class="login-container">
<button @click="loginWithGoogle">Login with Google</button>
<button v-if="user" @click="logout">Logout</button>
<div v-if="user">
<img :src="user.photoURL" alt="User Avatar" class="avatar" />
<p>{{ user.displayName }}</p>
</div>
</div>
</template>
<script>
import { ref, onMounted } from "vue";
import { auth, provider, signInWithPopup, onAuthStateChanged, signOut } from "../firebase";
export default {
setup() {
const user = ref(null);
const loginWithGoogle = async () => {
try {
const result = await signInWithPopup(auth, provider);
user.value = result.user;
} catch (error) {
console.error("Error during login:", error);
}
};
const logout = async () => {
try {
await signOut(auth);
user.value = null;
} catch (error) {
console.error("Error during logout:", error);
}
};
onMounted(() => {
onAuthStateChanged(auth, (loggedInUser) => {
user.value = loggedInUser;
});
});
return { user, loginWithGoogle, logout };
},
};
</script>
<style scoped>
.login-container {
text-align: center;
margin-top: 20px;
}
.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-top: 10px;
}
button {
margin: 5px;
padding: 8px 15px;
border: none;
background: #4285f4;
color: white;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background: #357ae8;
}
</style>—
### **3. Use `Login.vue` in Your App**
In your `App.vue`, import and use the `Login.vue` component.
#### **`App.vue`**
<template>
<div>
<h1>Vue Firebase Google Login</h1>
<Login />
</div>
</template>
<script>
import Login from "./components/Login.vue";
export default {
components: {
Login,
},
};
</script>—
### **How It Works**
1. **User clicks "Login with Google"** → Firebase authenticates the user.
2. **User's avatar (`photoURL`) and name (`displayName`) are displayed.**
3. **User clicks "Logout"** → Session ends and user data is cleared.
This will dynamically update the UI with the Firebase Google avatar and user details.
Let me know if you need modifications! 🚀