I am trying to set up google oauth in a react native, expo managed app. I am only having the following issue using my app within Expo Go - when I create a build of the app, the oauth flow works perfectly. But its hard to develop that way, and I need to be able to share a working app with non-dev team members via Expo Go. I have set up the flow in what I think is the same as what the expo go google auth documentation has described. An overview
Create a project in google console, and set up a new ClientID for web applications. Set the authorized origins and redirect uri:
Where myorg is the name of the expo organizational account that owns the project, and projectname is the same value as slug in app.json.
After setting this up, I get the client id, and client secret for this oauth login method.
In my app code, I follow the instructions to use the expo-auth-session library for google:
import * as WebBrowser from "expo-web-browser";
import * as Google from "expo-auth-session/providers/google";
WebBrowser.maybeCompleteAuthSession();
export const OAuthButtons: React.FC = () => {
const [request, response, promptAsync] = Google.useAuthRequest({
expoClientId: "clientId-from-google-console.apps.googleusercontent.com",
iosClientId: "will set this up eventually",
androidClientId: "will set this up eventually",
});
return; // markup for sign in buttons
}
So now in my app, when I click the google sign in button, I get the prompt to open the web browser correctly:
Clicking that correctly opens the expo web browser, but I see a "not found" message:
For more details, when I log the request, I get some pretty expected values
"{
"url": "https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=https%3A%2F%2Fauth.expo.io%2FMyProject&client_id=id-from-console.apps.googleusercontent.com&response_type=token&state=5xWG83SsoJ&scope=openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email",
"responseType": "token",
"clientId": "client-id-from-console.apps.googleusercontent.com",
"redirectUri": "https://auth.expo.io/MyProject",
"scopes": [
"openid",
"https://www.googleapis.com/auth/userinfo.profile",
"https://www.googleapis.com/auth/userinfo.email"
],
"state": "5xWG83SsoJ",
"extraParams": {},
"codeChallengeMethod": "S256",
"usePKCE": false
}"
The only values here that are a bit unexpected are the redirectUri and redirect_uri, which have a /MyProject appended to them, which is not exactly what I had put in my redirect uri in the google console. How did that get appended there? Might that be the problem?
As far as I can tell, I've set everything up as described. What is it exactly that is "Not Found" here? The oauth page for this particular expo application? Where did I go wrong in my setup?
Edit - Same Problem with Facebook.useAuthRequest
I am having the same exact problem with the Facebook provider module as well. Similar code:
const [facebookRequest, facebookResponse, facebookPromptAsync] =
Facebook.useAuthRequest({
clientId: "facebook_app_id",
responseType: ResponseType.Code,
});
I also tried the suggestion from the article Use expo-auth-session with Facebook the Easiest Way on iOS/Android to add the useProxy: true property, but that makes no difference.
const [facebookRequest, facebookResponse, facebookPromptAsync] =
Facebook.useAuthRequest(
{
clientId: "facebook_app_id",
responseType: ResponseType.Code,
},
{ useProxy: true }
);
The facebook login also opens the expo browser to an empty page that says "Not found"
What am I doing wrong here?
Do you have your originalFullName specify on your app.json? If not, try to add it e.g originalFullName: "#your_username/your_app_name"
And maybe this github issue can help you, https://github.com/expo/expo/issues/19891.
Related
I am trying to login with facebook using Supabase on ios emulator. After logging in with Facebook, it redirects me back to localhost. I don't know exactly what to do on this side. Can you help me? I'm still very new.
const onHandleLogin = async () => {
const {data, error} = await supabase.auth.signInWithOAuth({
provider: 'facebook',
});
if (error) {
return;
}
if (data.url) {
const supported = await Linking.canOpenURL(data.url);
if (supported) {
await Linking.openURL(data.url);
}
}
};
After the login process, it still stays on the localhost address on the browser. My purpose is to send it to the application and get token information via the url, but I have no idea how.
I think I need to make changes here but I don't know what to write in the site url because it is a mobile application.
Thanks for your support and replies.
I tried to login with facebook using supabase, but after logging in, it keeps me in safari and gives token information on localhost. I want to direct the application after the login process and get the token information.
You will need to create a deep link for your React Native app: https://reactnative.dev/docs/linking and then set this as your redirect URL. Here a similar example with Flutter: https://supabase.com/docs/guides/getting-started/tutorials/with-flutter#setup-deep-links
I am setting a universal link with a React Native app. It is routing to my app, but I am not getting the behavior that I expect.
Here is the component piece of my AASA file.
"components": [
{
"#": "no_universal_links",
"exclude": true,
"comment": ""
},
{
"/": "/oauth*",
"comment": "Redirect URL for OAuth"
}
]
The AASA file is hosted at a url that I own. I have installed the app on my phone, pulled the sysdiagnose file off my device and verified that my app is downloading the AASA file, so the routes should be working on my device.
In my React Native code, I have an event watcher looking at the urls that are being used to open the app. I am using the expo-linking library to log the url and params.
function handleLink(event) {
const data = Linking.parse(event.url);
console.log(data, data);
}
React.useEffect(() => {
Linking.getInitialURL().then((res) => {
console.log(res);
});
const listener = Linking.addEventListener("url", handleLink);
return () => listener.remove();
}, []);
When I route to <url>/oauth in safari, it gives the options to open up my app. When I use the app option the system then routes to my app. The code above then logs out the url and query params from the url that opened the app.
When I try to use the universal link for the actual OAuth redirect (not from Safari), it opens up my app, but no url is logged out from the event, so the event is not being hit at all. Also, it looks like it is opening up some kind of webpage in my app, but the fact is I really don't know what it is doing.
In short, when using my app with another service calling the url, it opens up my app, but I only see a white page and only know I am on my app by looking at the title of the app.
If anyone could give me any direction, I would be really grateful.
I'm on-boarding users onto Stripe connect. My node server generates a temporary HTTPS URL so that customers can sign on. According to their docs I need to provide a URL for when they complete the application.
https://stripe.com/docs/api/account_links/create#create_account_link
I have an Expo application. The user will open up the URL in their browser. However when they complete their application I would like them to go back to Expo App. If I try to use expo://MYAPP/ as the return_url, Stripe does not recognize the URL schema.
Does anyone have an idea how i can return the user back into my application after completing their on-boarding done via the browser?
For anyone one out there who runs into this post, this is was my solution. Your app has to link to a website. I am using Expo, but this is the React code to generate the link.
import * as WebBrowser from 'expo-web-browser';
import * as Linking from 'expo-linking';
const openPage = async () => {
try {
const result = await WebBrowser.openAuthSessionAsync(
`${url}?linkingUri=${Linking.createURL('/?')}`,
);
let redirectData;
if (result.url) {
redirectData = Linking.parse(result.url);
}
setstate({ result, redirectData });
} catch (error) {
console.log(error);
}
};
When you load the site, make sure to pass the URL that was generated from your backend
Backend code:
stripe.accountLinks
.create({
type: 'account_onboarding',
account: accountID,
refresh_url: `https://website.com/refresh`,
return_url: `https://website.com/return`,
})
When the user has the site open, have a button that redirects to the stripe URL.This is how i thought it went first
App -> Stripe connect
instead you have to approach it like this
App -> Website -> Stripe connect
I having a problem with my Google Sign In, I'm Currently using EXPO app I wish at all cost not to eject / opt out of Expo, the problem is that when I click on the Button to log in with Google in my App it does take me to the login page for me inside the browser, but once I put my Google credentials, it just lands inside the Google.com page.
I checked a lot of posts but still I'm unable to get it to come back to the app.
My app Code to log in is:
//import de Google en Expo
import * as Google from 'expo-google-app-auth';
import * as AppAuth from 'expo-app-auth';
export const googleLogin = () => {
console.log('***Entro en Google***');
return async dispatch => {
try {
const result = await Google.logInAsync({
androidClientId: '***my ID Censored***',
scopes: ['profile', 'email'],
behavior: 'web',
redirectUrl: `${AppAuth.OAuthRedirect}:/oauthredirect`
});
console.log('***Hizo Consulta***');
if (result.type === 'success') {
console.log(result.accessToken);
} else {
return { cancelled: true };
}
} catch (e) {
return { error: true };
}
}
};
I checked on many posts that the issue was the redirect URL and I tried setting 4 options:
${AppAuth.OAuthRedirect}:/oauthredirect
${AppAuth.OAuthRedirect}:/oauthredirect/google
'host.exp.exponent:/oauth2redirect/google'
'host.exp.exponent:/oauth2redirect/'
None of them worked, I did the last 2 of host.exp.exponent as that is the Bundle Identifier used by Expo on their documentation:
https://docs.expo.io/versions/latest/sdk/google/
Create an Android OAuth Client ID
Select "Android Application" as the Application Type. Give it a name
if you want (maybe "Android Development").
Run openssl rand -base64
32 | openssl sha1 -c in your terminal, it will output a string that
looks like A1:B2:C3 but longer. Copy the output to your clipboard.
Paste the output from the previous step into the
"Signing-certificate fingerprint" text field.
Use host.exp.exponent as the "Package name".
4.Click "Create"
You will now see a modal with the Client ID.
The client ID is used in the androidClientId option for Google.loginAsync (see code example below).
I did just that, and now it always gets stuck in the google.com page, any Ideas or recommendations?
Kind Regards
What have you added to your bundle id (e.g "Apple bundle ID")?
Take into account that there is a difference between production and development.
In development, you should use the default expo apple bundle id so you will be allowed to use the google login (and you won't get redirect_fail).
The default apple bundle id for development using expo is: host.exp.exponent
In production, you should have your own bundle id.
Please write up a follow-up message if any extra help is needed.
In app.json,
package name as to be all in small letters like com.app.cloneapp
I am using a manual auth configuration in my react native app to add OAuth to my react native app. I have followed all of the steps outlined here for Google and Facebook.
My problem is when I click on the button I have created in the front-end that redirects me to a federated sign-in, there is an extra 'https' in the link.
In AWS Cognito User Pools, my sign in and sign out URLS are set to myapp:// and have configured my hosted UI in the AWS console. I have also set the hosted UI url to the OAuth Redirect URI's in both facebook and google for my app clients.
This is my aws configuration in react native:
export default awsConfig = {
Auth: {
"aws_project_region": "us-west-2",
identityPoolId: 'us-east-1:*******',
region: 'us-east-1',
userPoolId: '************'
userPoolWebClientId: '*************'
oauth: {
domain: "https://myapp.auth.us-east-1.amazoncognito.com",
scope: [
"email",
"openid",
],
redirectSignIn: process.env.NODE_ENV === "myapp://",
redirectSignOut: process.env.NODE_ENV === "myapp://",
responseType: "code"
},
federationTarget: "COGNITO_USER_POOLS"
}
}
In my case, the problem occurs when I click either the "Sign in with Facebook" or "Sign in with Google" buttons.
This is what comes up when I click either link:
and the whole url is https://https//aspen-dev.auth.us-east-1.amazoncognito.com/oauth2/authorize?redirect_uri=false&response_type=code&client_id=****&identity_provider=Google&scope=email%20openid&state=****&code_challenge=xQX-****&code_challenge_method=S256
As you can see, there is an extra https, and I don't know what is causing it.
in awsConfig, I took out the 'https://' of the oauth.domain and now it is working
The problem did not happen on my side, but you may try to do
import awsconfig from './src/aws-exports';
awsconfig.oauth.domain = awsconfig.oauth.domain.substring(8)
So that you won't have to remove the leading "https://" again whenever you run amplify pull in the future.