Firebase OAuth with Google sends me to a blank page - firebase

I am trying to do a simple sign in/register with google using firebase auth for a Vue.js project I am working on. Unfortunately, both signInWithRedirect and signInWithPopup are sending me to blank pages with no error! Here is the situation:
I have configured the firebase app within the firebase console and set up google as a sign-in method. Signing in with email is working, so I know the firebase initialization is working. Here is that stuff anyway:
from main.js:
import { initializeApp } from "firebase/app";
const firebaseConfig = {
apiKey: "****",
authDomain: "date-night-mevn.firebaseapp.com",
projectId: "date-night-mevn",
storageBucket: "date-night-mevn.appspot.com",
messagingSenderId: "1054265433143",
appId: "1:1054265433143:web:9fc18db10198531a3573b2"
};
initializeApp(firebaseConfig);
From App.vue:
import { onMounted, ref } from 'vue';
import { getAuth, onAuthStateChanged, signOut } from '#firebase/auth';
import router from './router';
const isLoggedIn = ref(false);
let auth;
onMounted (() => {
auth = getAuth();
onAuthStateChanged(auth, (user) => {
if(user) {
isLoggedIn.value = true;
} else {
isLoggedIn.value = false;
}
});
});
const handleSignOut = () => {
signOut(auth).then(() => {
router.push("sign-in");
});
};
From Sign Up page:
const signUpWithGoogle = () => {
const provider = new GoogleAuthProvider();
signInWithPopup(getAuth(), provider)
.then((result) => {
console.log(result);
router.push("/");
})
.catch((error) => {
console.log(error)
alert(error.message)
});
}
On the above section, I have tried assigning auth to a variable outside the sign in function call as well as adding an event param to the function and running
event.preventDefault() before trying to sign in, but neither did anything for me.
It doesn't matter if I use signInWithRedirect or signInWithPopup, I always get a blank page. Here is the url it is trying to load: "https://date-night-mevn.firebaseapp.com/__/auth/handler?apiKey=******&appName=%5BDEFAULT%5D&authType=signInViaRedirect&redirectUrl=http%3A%2F%2Flocalhost%3A8080%2Fregister&v=9.9.2&providerId=google.com&scopes=profile" The only thing that looks strange to me here is "appName=%5BDEFAULT%5D", but that very well may be correct. I have seen a few other posts on this topic, but many are old and none yielded a solution for me. I look forward to any help I can get, cause it sure seems like I need it!
UPDATE: Today I tried the sign in with google button from my work computer (macbook) and it worked... I am also able to sign in with google on my iPhone, just not with my windows desktop. I have tried multiple browsers and turning vpn on/off, doesn't seem to make a difference.

Related

Firebase authentication not working in NuxtJs application

In am using Firebase Authentication in my Nuxt App. I am following the Firebase Documentation for setting up Authentication using GoogleAuthProvider. In my case, onAuthStateChanged() listener returns null even after successfull redirect.
When the user enter my web application, Nuxt will execute the plugin in the client side. There the firebase configuration is initialized. Then the initUser() function defined in useFirebaseAuth.ts composable is called. If user successfully logged In, log the user details.
Note : After I encountered this error, I replaced signInWithRedirect to signInWithPopup, it works very well.
// plugins/firebase.client.ts
import { initializeApp } from "firebase/app";
import { initUser } from "~~/composables/useFirebaseAuth";
export default defineNuxtPlugin(() => {
const config = useRuntimeConfig();
const firebaseConfig = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
appId: "...",
messagingSenderId: "...",
};
// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
initUser(firebaseApp);
})
// composables/useFirebaseAuth.ts
import { FirebaseApp } from "firebase/app";
import { getAuth,signInWithPopup, GoogleAuthProvider, onAuthStateChanged, signInWithRedirect, signOut, User } from "firebase/auth";
import { equalTo, getDatabase, onValue, orderByChild, query, ref as dbRef } from "firebase/database";
export const signInUser = async () => {
const provider = new GoogleAuthProvider();
const auth = getAuth();
await signInWithRedirect(auth, provider)
}
export const initUser = async (firebaseApp: FirebaseApp) => {
const auth = getAuth(firebaseApp)
const db = getDatabase()
onAuthStateChanged(auth, user => {
if (user) {
console.log(user)
} else {
console.log("user not logged in"
return navigateTo('/login')
}
});
}
export const signOutUser = async () => {
const auth = getAuth();
await signOut(auth)
}
In the above code, I always get the user value as null. I am working on the project for 2 months. The authentication works fine almost one month ago. But it is not working now. Please help me to resolve the issue.
# node --version
v19.5.0
# npm version
{
npm: '9.3.1',
node: '19.5.0',
v8: '10.8.168.25-node.11',
uv: '1.44.2',
zlib: '1.2.13',
brotli: '1.0.9',
ares: '1.18.1',
modules: '111',
nghttp2: '1.51.0',
napi: '8',
llhttp: '8.1.0',
uvwasi: '0.0.14',
acorn: '8.8.1',
simdutf: '3.1.0',
undici: '5.14.0',
openssl: '3.0.7+quic',
cldr: '42.0',
icu: '72.1',
tz: '2022g',
unicode: '15.0',
ngtcp2: '0.8.1',
nghttp3: '0.7.0'
}
I have gone through many answers posted for same question in the stackoverflow website. But those answers didn't solved my issues.

How to create a session cookie for persistent login in Firebase?

I've been going over Manage Session Cookies to get a better understanding of how firebase auth works. However I have run into some trouble when it comes to implementing cookies. I have been able to successfully follow the example up to the section labeled sign-in but have been unable to follow the next step where I generate my session cookie.
I would like to use my cookie as a jwt in order to do checks on users making request to my endpoints and trying to access my site. However I am unable to actually generate a cookie and am unsure why. The syntax is a bit confusing for me because I am using express while they are not.
So to clarify I believe that I have correctly set up my code but due to the fact that I have not been able to create a token I must not have. Also note that I am not doing the csrf step and will come back for that later and am mainly concerned with generating my token. If anyone can point out why my token might not be generating or point me in the right direction I would be grateful.
Code:
import functions from 'firebase-functions'
import { initializeApp } from 'firebase/app';
import { getAuth, getIdToken, signInWithEmailAndPassword } from "firebase/auth";
import express from 'express';
import cors from 'cors';
import pool from './db.js';
import cookies from "cookie-parser";
const firebaseConfig = {
apiKey: process.env.FB_APIKEY,
authDomain: process.env.FB_AUTHDOMAIN,
projectId: process.env.FB_PROJECTID,
storageBucket: process.env.FB_STORAGEBUCKET,
messagingSenderId: process.env.FB_MESSAGINGSENDERID,
appId: process.env.FB_APPID,
measurementId: process.env.FB_MEASUREMENTID,
};
const app = express();
const firebaseApp = initializeApp(firebaseConfig)
const auth = getAuth()
app.use(cors({origin:true}));
app.use(express.json());
app.use(cookies());
app.get('/firebaseLogin/:body',async(req,res)=>{
let {body} = req.params
body = JSON.parse(body)
const expiresIn = 60 * 60 * 24 * 5 * 1000;
try{
let signInAttempt = await signInWithEmailAndPassword(auth,body.user,body.pass)
let idToken = await getIdToken(signInAttempt.user) // Grabs user token after sign in is approved
getAuth()
.createSessionCookie(idToken, { expiresIn })
.then(
(sessionCookie) => {
// Set cookie policy for session cookie.
const options = { maxAge: expiresIn, httpOnly: true, secure: true };
res.cookie('session', sessionCookie, options);
res.end(JSON.stringify({ status: 'success' }));
},
(error) => {
res.status(401).send('UNAUTHORIZED REQUEST!');
}
);
}catch(error){
res.json(error)
}
})

Phoneauthprovider is not a function firebase react-native

Hi everybody im making a app using react-native and fire base im have this initial config at firebase config :
import firebase from 'firebase/app';
import 'firebase/auth';
import Constants from 'expo-constants';
// Firebase Config
// Initialize Firebase
export const firebaseConfig = {
apiKey: Constants?.manifest?.extra?.apiKey,
authDomain: Constants?.manifest?.extra?.authDomain,
projectId: Constants?.manifest?.extra?.projectId,
storageBucket: Constants?.manifest?.extra?.storageBucket,
messagingSenderId: Constants?.manifest?.extra?.messagingSenderId,
appId: Constants?.manifest?.extra?.appId
};
let Firebase
if (firebase.apps.length === 0) {
console.log('hello world')
Firebase = firebase.initializeApp(firebaseConfig);
}
export default Firebase;
And im triyng to call this method:
const loginUser = async() => {
switch(loginType){
case 0:
break;
case 1:
if (typeof(verificationId) == 'string') {
setLoading(true)
try {
const credential = new Firebase.auth.PhoneAuthProvider.credential(
verificationId,
verificationCode
);
await Firebase.auth.signInWithCredential(credential);
showMessage({ text: 'Phone authentication successful 👍' });
} catch (err) {
setLoading(false)
showMessage({ text: `Error: ${err.message}`, color: 'red' });
}
} else {
try {
const phoneProvider = Firebase.auth.PhoneAuthProvider();
const verificationId = await phoneProvider.verifyPhoneNumber(
phoneNumber,
recaptchaVerifier.current
);
setVerificationId(verificationId);
showMessage({
text: 'Verification code has been sent to your phone.',
});
} catch (err) {
showMessage({ text: `Error: ${err.message}`, color: 'red' });
}
}
break;
}
}
When im try to call my 'phone Login method' react-native show me this message:
im use this guide for how to configure the enviroment:
https://blog.jscrambler.com/how-to-integrate-firebase-authentication-with-an-expo-app
but using phone verification with recaptcha im not found the problem i believe the problem its in my implementation but in not found nothing
Thanks for the answers
I see you're trying to implement phone auth using firebase and I personally had success doing that using this:
async function signInWithPhoneNumber(phoneNumber) {
//1. Have the user input thei phone number into a TextInput and pass it to this function
//2. Have a confirm useState to make sure the verification code was sent successfully by firebase
//3. Check for the confirm state in the main component and show the user another TextInput to enter the verification code if confirm has a value
await firebase.auth()
.signInWithPhoneNumber(phoneNumber)
.then(confirmation => {
setConfirm(confirmation)
})
.catch(e => {
Alert.alert('Error sending verification code to this phone number')
})
}
async function confirmCode(code) {
//1. Have the code the user entered through the TextInput pass through here and call the below function
try {
let validation = await confirm?.confirm(code)
if (validation) console.log('correct code.')
} catch (error) {
Alert.alert('Invalid code.')
}
}
You're importing your own Firebase object, which is an instance of FirebaseApp. The PhoneAuthProvider class is not defined on FirebaseApp, but rather is in the (static) firebase.auth namespace.
So you either need to also import the regular Firebase Auth SDK into your code, instead of just your own Firebase object, or you can attach the firebase.authnamespace to yourFirebase` object and use it from there with:
...
if (firebase.apps.length === 0) {
console.log('hello world')
Firebase = firebase.initializeApp(firebaseConfig);
Firebase.auth = firebase.auth;
}
export default Firebase;

How to properly persist login state using FireBase in React Native EXPO?

I used email and password to sign in through Firebase. However, once I reload the app, I need to sign in again. Is there a way to automatically log user in once the app is reloaded?
I am using EXPO managed project with functional structure btw, not with class structure.
if you're still facing this problem.
Here's how I've done it.
Here's my App.js
const [loggedIn, setLoggedIn] = useState(false);
useEffect(() => {
return firebase.auth().onAuthStateChanged(setLoggedIn);
}, []);
if (loggedIn) {
return <HomeScreen />
} else {
<Login />
}
Here's the login code.
I have a simple form with email and password and a button, when pressed, this functions is called.
const handleLogin = async () => {
await firebase
.auth()
.signInWithEmailAndPassword(email, password)
.catch((err) => {
setVisible(true);
setModalMessage(err.message);
});
};
Let me know if this worked.

Facebook login with Firebase in React Native error 400

I am having trouble to register a user in Firebase with his Facebook credentials in RN. The Facebook and the Firebase apps are setup correctly, since everything is working as expected in Swift. The OAuth redirect URI is also setup correctly.
However when I try to do the same process from RN it fails. My setup is the following, when the user taps my login button I call FB's LoginManager.logInWithReadPermissions(['public_profile', 'email']) and on its success I call FirebaseManager's (which is my custom class for managing Firebase) signUpWithFacebook(). I get a FB access token correctly and I can see that a credential object is created.
However, Firebase always returns the error:
{"error":{"errors":[{"domain":"global","reason":"invalid","message":"A system error has occurred"}],"code":400,"message":"A system error has occurred"}}
The FirebaseManager looks like this:
import { AsyncStorage, NativeModules } from "react-native";
import * as firebase from 'firebase';
const firebaseConfig = {
apiKey: "key",
authDomain: "domain",
databaseURL: "db_url",
projectId: "project_id",
storageBucket: "storage_bucket"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const FBSDK = require('react-native-fbsdk');
const {
AccessToken
} = FBSDK;
export default class FirebaseManager {
constructor() {
// Some logic...
}
signUpWithFacebook() {
AccessToken.getCurrentAccessToken().then((data) => {
let accessToken = data.accessToken
console.log('FB accessToken: ' + accessToken)
const provider = new firebase.auth.FacebookAuthProvider();
const credential = provider.credential(accessToken);
console.log('FB credential: ' + credential)
firebase.auth().signInWithCredential(credential)
.then()
.catch((error) => {
console.log('Failed to sign in Firebase with Facebook. ' + error)
})
})
}
}
I would also like to note that Firebase's anonymous & email/password authentication are working with no problem.
My workaround for the moment is to do the Facebook login from Swift and return the user object in RN with a bridge and RN's NativeModules.
Some more info about my project:
react-native: 0.44.2
firebase: 4.0.0
react-native-fbsdk: 0.6.0
Any help would be appreciated!
Might be a long shoot but this looks VERY similar to a an issue in firebase JS SDK. The solution was to not make an instance of FacebookAuthProvider, by changing these lines:
const provider = new firebase.auth.FacebookAuthProvider();
const credential = provider.credential(accessToken);
to this:
var credential = firebase.auth.FacebookAuthProvider.credential(accessToken);

Resources