React Native Expo: Authentication with Identity Server 4 - authentication

Question

I am trying to use the sample code from expo documentation "https://docs.expo.io/guides/authentication/" for IdentityServer4. I have created a React template from ASP.NET Core Web Application. When I run the react native app to redirect to the login page of the ASP application I can login but the problem is the window does not close to return the token. It logs in and then I go to the home page of the ASP application. I believe I am missing the redirect URL or the client is not setup the right way. Can someone help me how to set this up? Or what part am I missing?
Here is my client set up from the ASP application from the appsettings.json:
"IdentityServer": {
"Clients": {
"AAA": {
"ClientId": "myclientid,
"ClientName": "Native Client (Code with PKCE)",
"RequireClientSecret": false,
"RedirectUris": [ "io.expo.auth/#username/Auth" ],
"AllowedGrantTypes": "GrantTypes.Code",
"RequirePkce": "true",
"AllowedScopes": ['openid', 'profile', 'email', 'offline_access'],
"AllowOfflineAccess": "true",
"Profile": "IdentityServerSPA",
"ClientSecrets": [
{
"Value": "secretvalue"
}
]
}
},
Below is my React Native app:
import * as React from 'react';
import { Button, Text, View } from 'react-native';
import * as AuthSession from 'expo-auth-session';
import * as WebBrowser from 'expo-web-browser';
WebBrowser.maybeCompleteAuthSession();
const useProxy = true;
const redirectUri = AuthSession.makeRedirectUri({
native: 'myApp://io.expo.auth/#username/Auth',
useProxy,
});
export default function App() {
const discovery = AuthSession.useAutoDiscovery('https://demo.identityserver.io');
// Create and load an auth request
const [request, result, promptAsync] = AuthSession.useAuthRequest(
{
clientId: 'myclientid',
redirectUri,
scopes: ['openid', 'profile', 'email', 'offline_access'],
},
discovery
);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Button title="Login!" disabled={!request} onPress={() => promptAsync({ useProxy })} />
{result && <Text>{JSON.stringify(result, null, 2)}</Text>}
</View>
);
}

Answer 1

Here is what you need to fix on ur code:
On appsettings.json change RedirectUris to be a list, result would be like this:
"IdentityServer": {
"Clients": {
"AAA": {
"ClientId": "myclientid,
"ClientName": "Native Client (Code with PKCE)",
"RequireClientSecret": false,
"RedirectUris": [ "io.expo.auth/#username/Auth" ],
"AllowedGrantTypes": "GrantTypes.Code",
"RequirePkce": "true",
"AllowedScopes": [ "api" ],
"AllowOfflineAccess": "true",
"Profile": "IdentityServerSPA",
"ClientSecrets": [
{
"Value": "secretvalue"
}
]
}
},
Read more here
Make sure URL listed on RedirectUris exist, and it match the value set for redirectUri on the native client. I'm no expo expert, you may use some sort of middleware but as far as I understand from your code above these URLs dont match.

Answer 2

#nahidf: I have updated the url from the react native and the ASP app. The log in still is fine on the android app, but after I log in, the app stays open with the home page of that ASP app and not closing to return to react app and also return the token. Does the expo app have to be published because I am running it locally? Also, the ASP I have published it on a local server.