Firebase google auth with React Native(expo).

Nicky_ · 08-10-2024 04:42 AM

Hello all!
I hope this is the correct forum to ask.

I was able to set with success the auth with email/password. But I was not hable to make it work with Google sing/in.

my credential page able to configure the authorised JavaScript Origins & authorised redirect URL. but I still getting "

Error 400: redirect_uri_mismatch Request details: flowName=GeneralOAuthFlow

This is my code(with modify creditials)

import { useEffect, useState } from 'react';
import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as AuthSession from 'expo-auth-session';

WebBrowser.maybeCompleteAuthSession();

const useGoogleSignIn = () => {
const [request, response, promptAsync] = Google.useAuthRequest({
androidClientId: "123456789012-abcdefghijklmno1234567890123456.apps.googleusercontent.com",
iosClientId: "123456789012-pqrstuvwxyzabcdefghijklmno123456.apps.googleusercontent.com",
webClientId: "123456789012-abcdefghijklmnopqrstuvwx1234567890.apps.googleusercontent.com",
redirectUri: "https://yourappname.firebaseapp.com/__auth/handler", // Explicitly set to your Firebase hosting URL
});

const [userInfo, setUserInfo] = useState(null);

useEffect(() => {
if (response?.type === "success") {
getUserInfo(response.authentication.accessToken);
}
}, [response]);

const getUserInfo = async (token) => {
if (!token) return;
try {
const response = await fetch("https://www.googleapis.com/userinfo/v2/me", {
headers: {
Accept: 'application/json',
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json'
},
});
const user = await response.json();
await AsyncStorage.setItem("@user", JSON.stringify(user));
setUserInfo(user);
} catch (e) {
console.log(e);
}
};

return { promptAsync, userInfo };
};

export default useGoogleSignIn;

import { useEffect, useState } from 'react';import * as WebBrowser from 'expo-web-browser';import * as Google from 'expo-auth-session/providers/google';import AsyncStorage from '@react-native-async-storage/async-storage';import * as AuthSession from 'expo-auth-session';WebBrowser.maybeCompleteAuthSession();const useGoogleSignIn = () => {const [request, response, promptAsync] = Google.useAuthRequest({androidClientId: "123456789012-abcdefghijklmno1234567890123456.apps.googleusercontent.com",iosClientId: "123456789012-pqrstuvwxyzabcdefghijklmno123456.apps.googleusercontent.com",webClientId: "123456789012-abcdefghijklmnopqrstuvwx1234567890.apps.googleusercontent.com",redirectUri: "https://yourappname.firebaseapp.com/__auth/handler", // Explicitly set to your Firebase hosting URL});const [userInfo, setUserInfo] = useState(null);useEffect(() => {if (response?.type === "success") {getUserInfo(response.authentication.accessToken);}}, [response]);const getUserInfo = async (token) => {if (!token) return;try {const response = await fetch("https://www.googleapis.com/userinfo/v2/me", {headers: {Accept: 'application/json',Authorization: `Bearer ${token}`,'Content-Type': 'application/json'},});const user = await response.json();await AsyncStorage.setItem("@user", JSON.stringify(user));setUserInfo(user);} catch (e) {console.log(e);}};return { promptAsync, userInfo };};export default useGoogleSignIn;

Thank you in advance !!!

"

jaydubu

Hi @Nicky_,

Welcome to Google Cloud Community!

Integrating Firebase Authentication with Google sign-in can be challenging, but here’s a detailed guide for Google sign-in and Expo on how to achieve this.

You’ve mentioned that you properly configured your “Authorized JavaScript origins” and “Authorized redirect URIs” (Google Cloud Console > Credentials > OAuth 2.0 Client IDs) but still receiving the error. The Error 400: redirect_uri_mismatch occurs when the redirect URI does not align with Google's OAuth 2.0 policy. You may check redirect_uri_mismatch for more information.

You can check this Stack Overflow post for some common troubleshooting steps (listing few examples below):

redirect_uri must be an EXACT MATCH on the console and in your application
redirect_uri is case sensitive
Recent changes can take 5 minutes to a few hours for settings to take effect
Check the protocol "http://" or "https://"
Add the uri displayed in the error box to your authorized redirect

To share with you, Firebase Authentication with React Native is currently a third-party library and it would be best to reach out directly to GitHub by filing a ticket in their issue tracker or to Google sign-in in case the above steps don't work.

Hope this helps.