During my use of Expo SDK 48, my app successfully implemented Google and Facebook authentication with a web browser-based authentication method.
Functional code:
type AuthResponse = AuthSession.AuthSessionResult & {
params: {
access_token?: string;
error?: string;
};
type: string;
}
...
const AuthProvider = ({ children }: any) => {
/* Google */
const signInWithGoogle = async (navigation: any) => {
try {
const SCOPE = encodeURI("email profile");
const RESPONSE_TYPE = 'token';
const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${GOOGLE_WEB_CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}&scope=${SCOPE}`;
const { type, params } = await AuthSession.startAsync({ authUrl }) as AuthResponse;
console.log("type ==>> " + type);
console.log("params ==>> " + JSON.stringify(params));
if (type === 'success') {
checkGoogleUserInfo(params.access_token, navigation);
} else {
return;
}
} catch (error) {
console.log("Error retrieving token data from Google ==>> ", error);
}
}
}
However, after upgrading Expo to SDK 50 and expo-auth-session
to 5.4.0
, the functionality of AuthSession.startAsync()
ceased to operate.
In my attempt to transition to the new approach outlined in the documentation here and this example, I encountered an error while fetching from the URL mentioned below:
Possible unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected character: <
Non-functional code:
const endpoint = "https://accounts.google.com/o/oauth2/v2/auth";
const clientId: any = GOOGLE_WEB_CLIENT_ID;
const redirectUri: any = REDIRECT_URI;
const [discovery, setDiscovery] = useState({});
useEffect(() => {
async function loadDiscovery() {
// The issue leading to promise rejection
const getDiscovery = await fetchDiscoveryAsync(endpoint).then((discovery) => setDiscovery({ discovery }));
// No output is displayed in the console
console.log("get getDiscovery >>>>>> " + JSON.stringify(getDiscovery));
}
loadDiscovery();
}, []);
const [request, response, promptAsync] = useAuthRequest({ clientId, scopes: ['email', 'profile'], redirectUri }, discovery);
useEffect(() => {
console.log(discovery);
if (!discovery) {
console.log("no discovery");
return;
}
if (response?.type === "error") {
console.log("response type error: " + (response.params.error || "something went wrong"))
return
}
if (!discovery || (response?.type !== "success")) {
console.log("no discovery and no response type");
return;
}
const code = response.params.code;
if (!code) {
console.log("no code");
return;
}
}, [response, discovery]);
Is there still a way to utilize web browser-based authentication for Google and Facebook?
Edit:
I was able to obtain a discovery
using https://accounts.google.com
as an endpoint, resulting in the following JSON. However, my response
remains null.
{
"discovery": {
"discoveryDocument": {
"issuer": "https://accounts.google.com",
"authorization_endpoint":
"https://accounts.google.com/o/oauth2/v2/auth",
"device_authorization_endpoint":
"https://oauth2.googleapis.com/device/code",
"token_endpoint": "https://oauth2.googleapis.com/token",
"userinfo_endpoint":
"https://openidconnect.googleapis.com/v1/userinfo",
"revocation_endpoint": "https://oauth2.googleapis.com/revoke",
"jwks_uri": "https://www.googleapis.com/oauth2/v3/certs",
"response_types_supported": [
"code",
"token",
"id_token",
"code token",
"code id_token",
"token id_token",
"code token id_token",
"none"
],
"subject_types_supported": [
"public"
],
"id_token_signing_alg_values_supported": [
"RS256"
],
"scopes_supported": [
"openid",
"email",
"profile"
],
"token_endpoint_auth_methods_supported": [
"client_secret_post",
"client_secret_basic"
],
"claims_supported": [
"aud",
"email",
"email_verified",
"exp",
"family_name",
"given_name",
"iat",
"iss",
"locale",
"name",
"picture",
"sub"
],
"code_challenge_methods_supported": [
"plain",
"S256"
],
"grant_types_supported": [
"authorization_code",
"refresh_token",
"urn:ietf:params:oauth:grant-type:device_code",
"urn:ietf:params:oauth:grant-type:jwt-bearer"
]
},
"authorizationEndpoint":
"https://accounts.google.com/o/oauth2/v2/auth",
"tokenEndpoint": "https://oauth2.googleapis.com/token",
"revocationEndpoint": "https://oauth2.googleapis.com/revoke",
"userInfoEndpoint":
"https://openidconnect.googleapis.com/v1/userinfo"
}
}
How should I proceed with utilizing this discovery document? My objective is to retrieve the user's email from Google after they input their credentials, similar to how it functioned prior to the SDK updates.