Its not redirecting to mobile app after Google login, instead it goes to google.com in react native android - react-native

I used redirectUrl and it's working fine in local development but when i create a Realease apk after it's not working it's redirect to google page.
const result = await Google.logInAsync({
androidClientId:'31022361841-7431bfbrm8qidpd9l7m9cldn1vd3nl65.apps.googleusercontent.com',
androidStandaloneAppClientId:'874376514949-m5f77i8pp4dub997jm664pfljle1bu9k.apps.googleusercontent.com',
redirectUrl: `${AppAuth.OAuthRedirect}:/oauthredirect`
scopes: ['profile', 'email'],
});

Related

react native supabase facebook login redirect callback site url

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

Expo Go with Google/Facebook OAuth - auth.expo.io login screen - "Not Found"

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.

How to resolve Okta redirection on github pages for vuejs app?

I have deployed a vuejs app on github-pages with okta authentication. On localhost (locally) when I click on a login button on my vuejs page it goes to Okta for authentication and then redirects to my localhost successfully.
Now I have deployed to github-pages and the redirection from Okta back to my github-pages does not work. I keep seeing the following error:
GET https://<MYUSERNAME>.github.io/vue-catalog-ui/implicit/callback?code=<REDACTED>&state=<REDACTED> 404
I guess Okta redirection does not work on Github-pages because locally I do this to run npm run serve which may do something additional like setting up a server?
The following is my Auth setup in my main.js file:
//const vueUrl = "http://localhost:8080"
const vueUrl = 'https://<MYUSERNAME>.github.io/vue-catalog-ui'
Vue.use(VueRouter)
console.log('issuer: ', process.env)
Vue.use(Auth, {
issuer: 'https://dev-<REDACTED>.okta.com/oauth2/default',
clientId: '<REDACTED>',
redirectUri: vueUrl + '/implicit/callback', // Handle the response from Okta and store the returned tokens.
scopes: ['openid', 'profile', 'email'],
pkce: true
})
vue.config.js:
publicPath: '/vue-catalog-ui/'
Any hints appreciated.

Why is my amplify federated sign-in in react native adding an extra 'https'?

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.

Google Photos API integration in React Native

I am using React native Google Sign in plugin for authenticating the users, to use google photos API. According to the given documentation of the plugin, I did the configurations. It is working fine on the iOS platform but not on the Android platform.
configuring google sign in
configureGoogleSignIn = async () => {
GoogleSignin.configure({
scopes: [
'https://www.googleapis.com/auth/photoslibrary',
'https://www.googleapis.com/auth/photoslibrary.sharing',
],
shouldFetchBasicProfile: true,
iosClientId:
Platform.OS === 'ios'
? 'iOS_PLATFORM_CLIENT_ID'
: 'ANDROID_PLATFORM_CLIENT_ID',
// offlineAccess: true,
});
};
When I use this code and sign in with an iOS device or simulator it is working fine and return the user details with idToken but on the android device, it only returns the user details and idToken as null.
Anybody help me with this