This page covers how to implement social sign-in for native applications via OIDC and OAuth 2.0. The user interaction looks like this:
- The user is presented with a login or registration screen that includes a social sign-in button.
- The user clicks the social sign-in button. A browser window opens (using ASWebAuthenticationSession on iOS or Custom Tabs on Android).
- The user authenticates with the identity provider and grants the application access to profile information.
- The user is redirected back to the application and is logged in.
The native app authentication flow
From a high level, the native app initializes a login or registration flow and receives the first part of the session token exchange code from the Ory Network. After the user performed the social sign-in, the user is redirected back to the native application via an iOS Universal Link or Android App Link. The native application then exchanges the session token exchange code for a session token.
As part of this flow, Ory will redirect the browser to a callback. In this demo, we use the redirect URL
http://localhost:19006/Callback. Please ensure that this
redirect URL is allowed!
The flow looks like this:
The following sections describe how to implement the native app authentication flow. The code examples are written in TypeScript for React Native. The steps refer to the steps in the flow diagram above.
Steps 1-5: Create an API flow with return_session_token_exchange_code=true
The user opens the login screen (1) and the native application initializes a login or registration flow through the Ory Network APIs (2) with the following parameters:
- The flow is of type
return_toparameter is set to the URL of the native application. This URL is used to redirect the user back to the app after the social sign-in.
return_session_token_exchange_codeparameter is set to
trueto receive the session token exchange code in the response (3).
Upon rendering the form, the user selects the specific social sign-in provider (4). The native application submits the form to the Ory Network (5).
Steps 6-12: Open the identity provider authentication URL in a browser
Ory Network returns a
422 status code if the user needs to perform a social sign-in from a flow of type
api (6). The response
contains the URL of the identity provider in the
opens a browser tab for authentication for the specified
url (7+8). Implementations in other languages and frameworks may vary.
The user authenticates with the identity provider and grants the application access to profile information (9). The identity provider then issues a redirect to the Ory Network callback URL (10), which the browser follows (11).
Steps 12-14: Exchange the session token exchange code for a session token
Finally, Ory Network issues a session for the user and redirects the browser to the application's
return_to URL (12). The native
application receives the second part of the session token exchange code in the
code URL query parameter. In the example below,
the call to
is used to close the browser tab and return the control flow to the code that awaited the call to
The native application then exchanges the session token exchange code for a session token (13) 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.
Finally, the native application stores the session token in the secure storage (14) and redirects the user to the home screen.