4

I'm a noob in the world of React-Native development and am trying to work out how to configure FormidableLabs' react-native-app-auth plugin so that a user of our app can sign in to our Identity Server 4 implementation and then return to the app.

I can get to the sign-in form easily enough - but after signing in it goes to another Identity Server page in the browser rather than back to the app. I assume this is because of a wrong configuration, but I've searched the net far and wide for an answer that actually explains what the redirectUrl should actually point to - in all the examples it just points to io.identityserver.demo:/oauthredirect. Is it possible to redirect back to an app?

What I've also noticed is that the original request to the login page does not pass it a ReturnUrl - that parameter is null.

I feel I'm missing something obvious here, but I cannot think what it is.

Here's the relevant code from the app:

import {authorize} from 'react-native-app-auth';
...
const config = {
                    issuer: 'http://10.0.2.2:5000',
                    clientId: 'MyApp',
                    redirectUrl: '?? what goes here ??',
                    scopes: ['openid', 'profile', 'offline_access'],
                    serviceConfiguration: {
                        authorizationEndpoint: `http://10.0.2.2:5000/Account/Login`,
                        tokenEndpoint: `http://10.0.2.2:5000/connect/token`
                    }            
                }
                const result = await authorize(config);

The Identity Server is running on port 5000 (in localhost on my pc).

Can anyone point out what I'm doing wrong?

Thanks in advance!

user3529977
  • 215
  • 1
  • 2
  • 9

2 Answers2

5

You have 2 main choices for a redirect URI and the first option is simpler but a little less secure:

In order for the redirect to return to the app you need to register the scheme with the Android / iOS systems.

PRIVATE URI SCHEME

My write ups should enable you to quickly run the standard samples and get Private URI schemes working. You can then set similar Android / iOS settings in your ReactNative app:

CLAIMED HTTPS SCHEME

This is more effort but my blog also has Android / iOS samples that you can run and read about in case interested.

Gary Archer
  • 22,534
  • 2
  • 12
  • 24
  • 1
    Thank you: that's what i was looking for. Given that this is surely the very first consideration for anyone writing a native app, I find it astonishing that this information is so hard to find. It should be on page one of any article about writing or securing apps. – user3529977 Jul 07 '20 at 14:44
  • I am following this example but I am unable to understand what is the purpose of :/oauth2redirect, is this the screen name where you want it to redirect? – hfarhanahmed Jul 11 '23 at 12:29
  • It's a path within a private URI scheme address where the login response is received by the app, containing the authorization code. A common path is `/callback`. There is no screen there. – Gary Archer Jul 11 '23 at 12:47
  • @GaryArcher so how can I implement this callback in a screen where I want the result – hfarhanahmed Jul 12 '23 at 04:07
  • The screen that launches the login receives the result after login completes in the system browser. Have a look at references to [loginLauncher in this code of mine](https://github.com/gary-archer/oauth.mobilesample.android/blob/master/app/src/main/java/com/authsamples/basicmobileapp/app/MainActivity.kt#L43). – Gary Archer Jul 12 '23 at 05:12
0

You are on the right track, once the user has logged into IdentityServer it will redirect back to redirectUrl.

I suggest you to read the docs as it has it explained with example code.

nahidf
  • 2,260
  • 1
  • 15
  • 22
  • Hi - we have read the docs quite thoroughly, and understand the principle of redirecting back to the URL: we have this working perfectly for a React.js application that runs in the browser. My question, though, is how it is supposed to work for an app running on a mobile phone? What is the format of a redirect URL to get back to the app? Is there even such a concept? – user3529977 Jul 06 '20 at 18:54
  • 1
    @user3529977 Yes there is such a concept, based on OAuth 2.0 for Native Apps https://tools.ietf.org/html/rfc8252, we have two approaches for native apps to interact with the authorization endpoint: an embedded user-agent and an external user-agent. Best practice is through external user agents, primarily the user's browser. Section 7 of rfc8252 contains the options for `Receiving the Authorization Response in a Native App`, you may choose what works the best for you. Here is a good read https://auth0.com/blog/oauth-2-best-practices-for-native-apps – nahidf Jul 07 '20 at 12:02
  • And this is a link to a very good answer to simalr question https://stackoverflow.com/questions/17427707/whats-the-right-oauth-2-0-flow-for-a-mobile-app . Also I should mention the other answer here is very good and it contains sample for some of the options – nahidf Jul 07 '20 at 12:04