Helped me through, despite not being the same problem the use the URL quote helped me solve this by changing a bit how I thought about it!
The final result became a little too big to paste here, but the handling ended up being relatively straightforward:
useEffect(() => { if (result?.type === "success") { const { token, iv } = getParamsFromUrl(result.url) const session = decrypt(token, key, iv) console.log({ session }) } }, [result])
I was able to fix the problem.
I simply needed to provide a deep link from the Expo browser to the mobile app. The result would return success once I set up the redirect URL to the deep link provided by the Expo browser.
So
const result = await Browser.openAuthSessionAsync(
`${frontEndUrl}/auth/google?mobile=true`,
`${frontEndUrl}`);
Simply became
const result = await Browser.openAuthSessionAsync(
`${frontEndUrl}/auth/google?mobile=true`,
`exp://192.168.2.100:8081`);
And then on my backend Authentication handler, I had to redirect to exp://192.168.2.100:8081 once completed.
https://docs.expo.dev/guides/deep-linking/
You can use WebBrowser.dismissAuthSession() to programmatically close the web browser.
More documentation here.
For the no result part: I had the same issue and I switched to the WebBrowser.openBrowserAsync and it fixed the issue for me.
I am having issue with WebBrowser.openAuthSessionAsync not opening on Android. We are using the webBrowser for user to login or create an account on the WebBrowser, but currently nothing open when I press on handlePressLoginAccount:
const disabledDeepLinks = [
'https://www.mydomain.com/app-login',
'https://www.mydomain.com/app-signup'
];
const handlePressLoginAccount = async () => {
const redirectUri = AuthSession.makeRedirectUri({ scheme: 'mtlblog' });
console.log('Redirect URI:', redirectUri);
const loginAuthUrl = `https://www.mydomain.com/app-login?redirect_uri=${encodeURIComponent(redirectUri)}`;
const baseLoginUrl = loginAuthUrl.split('?')[0];
try {
let result;
if (Platform.OS === 'android' && disabledDeepLinks.includes(baseLoginUrl)) {
Alert.alert('android open webbrowser ' +
disabledDeepLinks.includes(baseLoginUrl));
result = await WebBrowser.openAuthSessionAsync(loginAuthUrl, redirectUri);
} else {
result = await WebBrowser.openAuthSessionAsync(loginAuthUrl, redirectUri);
}
console.log('Browser opened successfully', JSON.stringify(result));
if (result.type === 'success' || result.url) {
const { token, userId } = extractParams(result.url);
if (token && userId) {
await SecureStore.setItemAsync('token', token);
await SecureStore.setItemAsync('userId', userId);
setAuthenticated(true);
setSkippedLoginUser(false);
} else {
console.log('Login Failed', 'No authentication data found.');
}
} else {
console.log('Login Failed', 'Authentication was not completed.');
}
} catch (error) {
console.log('Error', 'Failed to open web browser.');
console.error('Failed to open web browser:', error);
}
};We are not sure if this issue is due to how we configure the deep link for android:
"intentFilters": [
{
"action": "VIEW",
"autoVerify": true,
"data": [
{
"scheme": "https",
"host": "www.mydomain.com",
"pathPrefix": ""
}
],
"category": [
"DEFAULT",
"BROWSABLE"
]
}
]Update: found the issue. It was caused by the discovery failing silently. The example code is not well engineered here. There should be a check (even in the example) that detects errors when doing the discovery part.
If you are encountering this, make sure the actual endpoint URL delivered to the auth mechanism is actually set from the discovery.
In My case it was like missing scheme. After adding it worked in expo go
{
"expo": {
"scheme": "your-app-slug"
}
}
» npm install expo-web-browser
hi! Using the expo-web-browser package, I get this pop up when openAuthSessionAsync is called. Is there a way to prevent this? I understand why it's there, but terrible UX 🤣
popupI’m using Expo with React Native, and I have a login flow that opens an in-app browser using expo-web-browser.
Here’s what I’m doing:
The user logs in via a web page inside the in-app browser.
After a successful login, the web redirects to a URL like
myapp://callback.When this redirect happens, I want the in-app browser to automatically close and return to the app.
I’m using WebBrowser.openAuthSessionAsync(authUrl, redirectUri).
This works perfectly on iOS — the browser closes automatically when the redirect happens.
But on Android, it stays open and never closes.
I realized my redirect URL (myapp://callback) is my app’s own scheme. Could that be the reason?
Is there a reliable way to handle this on Android - maybe by manually dismissing the browser?