We've already implemented a Web UI in our React We...
# talk-kratos
b
We've already implemented a Web UI in our React Web application for sign up + login. Now we need to implement it in our React Native iOS+Android application. Can we open a webview in the app, authorize the user and then exchange the cookie for a session token? πŸ€” Or do we have to implement something similar that we did in React Web in React Native? E.g. fetch the flow with the nodes and build it (with the help of the example repo, of course)
m
Yes, you can implement a similar flow in your React Native application as you did in your React Web application. The process involves initializing a login or registration flow, receiving a session token exchange code, and then exchanging this code for a session token. Here’s a high-level overview of the process: 1. The native app initializes a login or registration flow and receives the first part of the session token exchange code from the Ory Network. 2. After the user performs the social sign-in, they are redirected back to the native application via an iOS Universal Link or Android App Link. 3. The native application then exchanges the session token exchange code for a session token. In the case of a React Native application, you would use the
WebBrowser.openAuthSessionAsync
method to open a browser tab for authentication. The user authenticates with the identity provider and grants the application access to profile information. The identity provider then issues a redirect to the Ory Network callback URL, which the browser follows. You can find a detailed guide on how to integrate authentication into a React Native application in the Ory documentation. Please let me know if you run into any issues with it!
b
Thank you for the thorough response, @magnificent-energy-493 πŸ™Œ Just to make sure; this is an approach where we can open our web-based registration/login form via
WebBrowser.openAuthSessionAsync()
, right? And then we can grab the cookie value that we get via the webview (or this exchange token) and then exchange it for a session token? Reason why I ask is that we'd prefer (if possible) to have one web page for registration/login, and that both our web application and our iOS/Android application can use it. At the expense of a webview/modal in the app that renders the React Web login/regstration, but thats fine.
openAuthSessionAsync()
is for expo, no? We use React Native w/o Expo.
Think maybe there's some confusion here. We would like to re-use the flow we already have in our Web Application. So something like using
openAuthSessionAsync()
to https://ourapp.example.org/sign-in?redirect=ourapp://auth (pseudo).
I've successfully made a POC with react-native-inappbrowser which uses a secure webview, and I'm able to authenticate via our Web-based SSO page (React Web, communicating with Kratos) and I believe the end result is a cookie in the SFAuthenticationSession/ASWebAuthenticationSession webview. I've configured our app's app scheme url as redirect, which sends the user back to our React Native App – but that doesn't give me a cookie or a session token. Still with me @magnificent-energy-493? πŸ™‚ React Native is huge and I think a lot of users would ideally want to use a single SSO web page for both their mobile app and their web app – I'd be happy to draft an article/tutorial for it if you're interested and have time to help me achieve it.
I guess I could redirect authenticated users to something like
<https://ourapp.example.org/authenticated/info>
which would print out the session and perhaps exchange the cookie for a session token in some way? I know you generally don't want to break this isolation, but then I'm wondering how many other apps solves this. E.g. apps that use some web-page with SSO, which ends up in an authenticated mobile session.
@magnificent-energy-493 I gave up this approach in the end, I would've needed support in able to continue. I'm currently building something similar to your React Native + Expo repo example, but without Expo which turned out to work for login w/SSO via OpenID. Only issue now is that when this happens;
Received successful OpenID Connect callback but user is not registered. Re-initializing registration flow now
Then Kratos redirects back to the app (without any query params) which re-renders the (unchanged) login flow which again shows "Sign in with [openid-provider]" although Kratos creates a new registration flow in the database (with another flow id). How do I get the ID of that registration flow? I can't just pick the most recent entry from the database obviously 😬
I reckon you don't have time/capacity or that this kind of help is out of scope would be great to just know. If it helps, this is a part of a PR I've created (draft) to support a big European identity provider. Hoping to get this to work so that I can finish the PR.