HomeiOS Developmentreact native - Expo Google OAuth with expo-auth-session: redirect_uri_mismatch and flowName=GeneralOAuthFlow when...

react native – Expo Google OAuth with expo-auth-session: redirect_uri_mismatch and flowName=GeneralOAuthFlow when utilizing auth.expo.io


I’m constructing an Expo React Native app and making an attempt to implement Google Signal-In utilizing
`expo-auth-session` and `expo-auth-session/suppliers/google`.

Setting:
– React Native (Expo Router)
– Operating in Expo Go on iOS
– Google OAuth shopper IDs created in Google Cloud:
– Internet software
– iOS
– Android

import { AntDesign } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as Google from 'expo-auth-session/suppliers/google';
import { useRouter } from 'expo-router';
import * as WebBrowser from 'expo-web-browser';
import React, { useCallback, useEffect, useState } from 'react';
import { Alert, Button, Pressable, Textual content, View } from 'react-native';

import IconFacebook from '../../../icons/IconFacebook';
import IconGoogle from '../../../icons/IconGoogle';

WebBrowser.maybeCompleteAuthSession();

export default operate LoginScreen() {
const router = useRouter();
const [, setUserInfo] = useState(null);

const redirectUri = 'https://auth.expo.io/@trieuman2705/bkoo';

const [request, response, promptAsync] = Google.useAuthRequest({
expoClientId:
'8263....apps.googleusercontent.com',
iosClientId:
'8263...apps.googleusercontent.com',
androidClientId:
'8263332....apps.googleusercontent.com',
webClientId:
'8263332....apps.googleusercontent.com',
scopes: ['profile', 'email'],
redirectUri,
});

useEffect(() => {
console.log('Google redirectUri =', request?.redirectUri);
}, [request]);

// ...fetchUserInfo + UI omitted for brevity
}

On the Google Cloud aspect, my Internet software shopper with ID:
'8263332....apps.googleusercontent.com'

has this Licensed redirect URI configured:
https://auth.expo.io/@trieuman2705/bkoo

So I count on that, when operating in Expo Go together with expoClientId/webClientId, the OAuth request will use that internet shopper and redirect URI.

Nonetheless, once I begin the login movement and log the generated request, I see this:
OAuth Request: {
redirectUri: "https://auth.expo.io/@trieuman2705/bkoo",
request: {
clientId: "826333210617-dogrjmu5121isqo1gdnblogr23j6qh6b.apps.googleusercontent.com", //
redirectUri: "https://auth.expo.io/@trieuman2705/bkoo",
responseType: "code",
scopes: ["profile", "email", "openid", ...],
url: "https://accounts.google.com/o/oauth2/v2/auth?code_challenge=...&
redirect_uri=httpspercent3Apercent2Fpercent2Fauth.expo.iopercent2Fpercent40trieuman2705percent2Fbkoo&
client_id=826333210617-dogrjmu5121isqo1gdnblogr23j6qh6b.apps.googleusercontent.com
&response_type=code&state=...&scope=..."
}
}

And within the browser I get this error web page from Google:
Error 400: redirect_uri_mismatch
(Particulars point out flowName=GeneralOAuthFlow, however the principle message is redirect_uri_mismatch)

So Google is seeing:
client_id = iOS shopper ID
redirect_uri = https://auth.expo.io/@trieuman2705/bkoo

however that redirect is configured for the Internet shopper, not for the iOS shopper. I’m confused about why expo-auth-session is choosing the iOS shopper ID for this movement once I’m operating in Expo Go and I’ve additionally supplied expoClientId/webClientId.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments