<@U04UQ68083H> I have an existing cross-plattform ...
# ory-copilot
c
@chilly-king-10285 I have an existing cross-plattform (web, Android, iOS) app based on React Native and Expo which uses Ory for Login. Only password-based logins have been implemented so far. We are extending into Social Logins using Google as Identity Provider. It works fine for web using the browser-based login flow. The problem is for Mobile: after opening a
Copy code
WebBrowser.openAuthSessionAsync
and the user clicking on login at Google, instead of opening the callback URL (https://myapp.com/api/.ory) inside the WebBrowser, the URL is opened with the app which can not handle it. We believe this interferes with the completion of the native login flow. Context: the app is using deep links / universal links for the domain of https://myapp.com so that every path gets opened by the app. How can we solve this issue?
b
A message from kapa.ai
Your issue arises because your app is configured to handle all deep/universal links for your domain (e.g., https://myapp.com), so when Google redirects to your callback URL after authentication, the link is intercepted by your app instead of being handled in the browser context required to complete the Ory login flow. Ory’s recommended native social sign-in flow expects the browser to handle the callback, so it can complete the authentication and then redirect back to your app with the session token exchange code. If your app intercepts the callback URL too early, the Ory flow cannot complete as intended. ### Solution Approach 1. Use a dedicated callback path for Ory flows that is not handled by your app’s deep/universal link configuration. - Configure your app’s universal/deep link settings to exclude the specific callback path used by Ory (e.g., https://myapp.com/api/.ory or a similar path). - This way, when the browser receives the redirect to the callback URL, it will not be intercepted by your app, allowing Ory to complete the flow and then redirect to your app with the appropriate parameters (such as the session token exchange code). 2. Update your Ory project’s allowed redirect URLs to match the new callback path. - In the Ory Console, go to Branding → Browser redirects and ensure your callback URL (e.g., https://myapp.com/api/.ory/callback) is listed as an allowed redirect. - Also, update your Google OAuth client configuration to use this callback URL. 3. Only handle the final app-specific deep link in your app. - After Ory completes the flow, it should redirect to a URL (using the
return_to
parameter) that your app is configured to handle, passing the session token exchange code or other relevant data. ### Reference This approach is consistent with Ory’s documentation for native/mobile social sign-in, which describes the need for the browser to handle the Ory callback before returning control to the app via a deep link or app link. The documentation specifically notes: > As part of this flow, Ory will redirect the browser to a callback. ... Please ensure that this redirect URL is allowed. Go to BrandingBrowser redirects in the Ory Console to allow it. > The native application then exchanges the session token exchange code for a session token ... using the first part of the code returned from the flow initialization, and the second part of the code returned from the
return_to
query parameter. [Social sign-in for native and mobile apps](https://www.ory.sh/docs/kratos/social-signin/native-apps/) ### Summary - Exclude the Ory callback path from your app’s deep/universal link handling. - Allow the browser to handle the Ory callback and complete the authentication flow. - Only handle the final deep link (with the session token exchange code) in your app. This should resolve the issue where the app intercepts the Ory callback too early, allowing the native social login flow to complete as intended.
c
@chilly-king-10285 Can you explain how to exclude the path from the deep linking config. AFAICT exclusion of paths is not possible using React Natives Linking api.
b
A message from kapa.ai
I'm sorry, but the knowledge sources do not contain specific information about how to exclude paths from deep linking configuration in React Native or Expo. The Ory documentation and related issues discuss the need to allow the browser to handle certain callback URLs for native social sign-in flows, and mention that deep/universal link handling can interfere with this process, but they do not provide technical details or examples on how to configure exclusions in React Native's Linking API or Expo's linking configuration. If you need further guidance, you may want to consult the official React Native or Expo documentation, or consider restructuring your app's deep link configuration to avoid conflicts with Ory's callback URLs as suggested in the Ory docs for native social sign-in flows [Social sign-in for native and mobile apps](https://www.ory.sh/docs/kratos/social-signin/native-apps/).