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

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.

Related

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.

Nuxt auth with keycloak: ssr this.$auth.loggedIn always false on page load

I have a setup with nuxt and keycloak as auth strategy which in general is working. I can login via keycloak and then will have this.$auth.loggedIn === true on the page. When navigating via vue-router, this.$auth.loggedIn will also be true when switching to a new page.
But when I then reload the page (CMD+r/F5), server side rendering will have false for this.$auth.loggedIn, while on client side it will be true. This forced me to do a lot of <client-only> blocks in the templates to prevent ssr mismatches.
I wonder if it is possible that on first page load server side rendering can return a page with authorized content? I would think this should be possible since cookies with auth info are set and sent to the server.
Or is that never possible and efficient server side rendering can only be used for non-authorized content?
Versions:
nuxt: 2.15.8
#nuxtjs/auth-next: 5.0.0-1643791578.532b3d6
nuxt.config.js:
auth: {
strategies: {
keycloak: {
scheme: 'oauth2',
endpoints: {
authorization: `${ process.env.KEYCLOAK }/protocol/openid-connect/auth`,
userInfo: `${ process.env.KEYCLOAK }/protocol/openid-connect/userinfo`,
token: `${ process.env.KEYCLOAK }/protocol/openid-connect/token`,
logout: `${ process.env.KEYCLOAK }/protocol/openid-connect/logout`,
},
token: {
property: 'access_token',
type: 'Bearer',
maxAge: 1800,
},
refreshToken: {
property: 'refresh_token',
maxAge: 60 * 60 * 24 * 30,
},
responseType: 'code',
grantType: 'authorization_code',
clientId: process.env.CLIENT_ID,
scope: ['openid', 'profile', 'email', 'roles'],
codeChallengeMethod: 'S256',
redirect: {
logout: '/',
callback: '/',
home: '/',
},
},
},
},
Having a Vue component with this:
created() {
console.log(this.$auth.loggedIn);
},
Will return false for SSR and true on client side on page load/refresh when logged in.
After manually implementing a server side authenticator, I found out that the problem was my local docker setup.
Didn't think this was the problem before, so I forgot to mention it.
I have a local docker container with keycloak and a local docker container with nuxt.
Long story short, it seems that the nuxt server wasn't able to communicate with keycloak, hence wasn't able to fetch the user. After changing some addresses so that keycloak was available on the same address from the browser and from within my nuxt server docker container, the nuxt server did get $auth.loggedIn=true automatically on page load if the is was logged in.
Not sure if I didn't see it, but I wished nuxt auth would give me an error if the nuxt server failed to communicate with the authorization server. Would have saved me a lot of debugging.

How to search users in Cognito userpool in React Native app

I'm building an app using React Native and Amplify (including authentication) and need to let users search for and follow other users also using the app.
The authentication flow is working fine, but I'm not able to search the cognito userpool for the list of users.
According to amplify-js/packages/amazon-cognito-identity-js/, one of the v1.0 functionality enabled "Search users in your pool using user attributes.", but so far I'm unable to find any additional documentation or examples.
I've tried using the Auth object from the aws-amplify module and the CognitoUserPool object from the amazon-cognito-identity-js module, and neither seems to offer the search functionality.
How should I be going about this?
Ended up with this:
AWS.config.update({
accessKeyId: "YOUR_ACCESS_KEY",
secretAccessKey: "YOUR_SECRET_ACCESS_KEY,
region: "YOUR_REGION"
});
const params = {
UserPoolId: 'THE_USER_POOL_ID',
AttributesToGet: [
'email',
],
};
const cognitoidentityserviceprovider = new AWS.CognitoIdentityServiceProvider();
cognitoidentityserviceprovider.listUsers(params, (err, data) => {
if (err) {
console.log(err);
}
else {
console.log("data", data);
}
})
The problem now becomes having to store the access keys on-device, which I can't do. Will likely create another table in Datastore to store user info for querying.

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

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'],
});