Skip to content

feat(react): enable OAuth in React Native#80

Merged
andrascodes merged 1 commit into
mainfrom
andras/feat-react-enable-oauth-in-react-native
May 14, 2026
Merged

feat(react): enable OAuth in React Native#80
andrascodes merged 1 commit into
mainfrom
andras/feat-react-enable-oauth-in-react-native

Conversation

@andrascodes
Copy link
Copy Markdown
Collaborator

@andrascodes andrascodes commented Apr 2, 2026

This PR is part of a stack created with Aviator.

Closes FS-1922, FS-2000

This PR comes after #124. So make sure you review #124 before this one if you want to go in a chronological order.

Update: Changed this PR to be on top of the stack and added Passkeys and Android setup before this. This way this PR can be tested by just running pnpm android and using the Android Emulator.

Refactored the OAuth implementation in wallet-react to be more contained in a single place so it's easier to create web and mobile modules for it.
The new structure of the authenticateOAuth action looks like this:

// setup - same as it was
// `getSessionId` - injected module for web and mobile, this takes care of opening the popup and waiting for the sessionId, sessionId is the result of a Promise
// `completeAuth` - calling `wallet.auth` and changing the state, this used to be here too so basically unchanged

The main change is the behavior of the web OAuth flow. The new code doesn't rely on using postMessage and a message listener anymore. It instead polls for the URL change of the popup. The main advantage of this is that we don't need any of the additional code that we had in the old logic where the popup had to open, load the app, run JS to detect the OAuth callback and complete the auth with the sessionId. We can do that all in the getSessionIdWeb module. This meant that we could get rid of the OAuth related code in connector.ts.
So the new logic just checks the URL of the popup every 250ms and if it's on the same origin (same URL as the app) then it tries to get the sessionId param off of the query params.
An additional security advantage to this is that checking for same origin is implicit as we can't get the popup's URL across origins. So if the popup is still on the Google OAuth flow the check errors on popup.location.href already. In the old flow we had to make sure to check for origin === expectedOrigin to be secure.

@andrascodes andrascodes force-pushed the andras/feat-react-enable-oauth-in-react-native branch 2 times, most recently from 3ebc21a to eab2596 Compare April 7, 2026 11:21
@andrascodes andrascodes force-pushed the andras/feat-add-expo-example-app branch 2 times, most recently from accf679 to d265505 Compare April 7, 2026 16:17
@andrascodes andrascodes force-pushed the andras/feat-react-enable-oauth-in-react-native branch from eab2596 to 5c951dd Compare April 7, 2026 16:17
@andrascodes andrascodes force-pushed the andras/feat-add-expo-example-app branch from d265505 to ef7beaa Compare April 20, 2026 10:11
@andrascodes andrascodes force-pushed the andras/feat-react-enable-oauth-in-react-native branch from 5c951dd to 6ca2eba Compare April 20, 2026 10:11
@andrascodes andrascodes marked this pull request as ready for review April 23, 2026 07:26
@andrascodes andrascodes changed the base branch from andras/feat-add-expo-example-app to andras/feat-expo-example-add-passkey-auth-and-test-on-android April 24, 2026 16:39
@andrascodes andrascodes force-pushed the andras/feat-react-enable-oauth-in-react-native branch 2 times, most recently from 6cee6db to cce8e30 Compare April 24, 2026 17:57
@andrascodes andrascodes force-pushed the andras/feat-expo-example-add-passkey-auth-and-test-on-android branch from ad00a9e to 358ac5e Compare April 24, 2026 17:57
Comment thread packages/react/src/authenticateOAuth.ts
Comment thread packages/react/src/getSessionIdWeb.ts
Comment thread packages/react/src/getSessionIdWeb.ts Outdated
Comment thread apps/expo-example/oauth/createNativeOAuthGetSessionId.ts Outdated
Comment thread packages/react/src/authenticateOAuth.ts Outdated
Comment thread packages/react/src/hooks/useAuthenticateOAuth.ts Outdated
Copy link
Copy Markdown
Collaborator

@SahilVasava SahilVasava left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Architecture is right — pluggable getSessionId is a much cleaner native story than what the old design could have grown into. Five inline notes:

  • 🟡 No timeout on getSessionIdWeb — promise hangs on stuck popups
  • 🟡 popup.closed checked before URL — closed-vs-success race
  • 🟡 Native dismissBrowser() only on success — auth tab stays open on error
  • 🟡 Same returnTo path-drop as #143 fixed — cherry-pick when rebasing
  • 🟡 Variables type only in this hook — drop by aligning action's Parameters

Nothing blocking the architectural direction; all addressable in this PR or follow-ups.

@andrascodes andrascodes force-pushed the andras/feat-react-enable-oauth-in-react-native branch from 167a4f2 to b9acfc8 Compare May 4, 2026 13:12
@andrascodes andrascodes force-pushed the andras/feat-expo-example-add-passkey-auth-and-test-on-android branch from 31c7756 to fed766a Compare May 13, 2026 12:00
@andrascodes andrascodes force-pushed the andras/feat-react-enable-oauth-in-react-native branch from 7415541 to 6b21283 Compare May 13, 2026 12:00
@andrascodes andrascodes force-pushed the andras/feat-react-enable-oauth-in-react-native branch from 6b21283 to bce6dbe Compare May 13, 2026 14:38
@andrascodes andrascodes force-pushed the andras/feat-expo-example-add-passkey-auth-and-test-on-android branch from e3ffa73 to c50c4eb Compare May 13, 2026 16:07
@andrascodes andrascodes force-pushed the andras/feat-react-enable-oauth-in-react-native branch from bce6dbe to 718a845 Compare May 13, 2026 16:07
@andrascodes andrascodes force-pushed the andras/feat-react-enable-oauth-in-react-native branch from 718a845 to 8944716 Compare May 13, 2026 17:08
@andrascodes andrascodes force-pushed the andras/feat-expo-example-add-passkey-auth-and-test-on-android branch from c50c4eb to 0581bb2 Compare May 13, 2026 17:08
@andrascodes andrascodes changed the base branch from andras/feat-expo-example-add-passkey-auth-and-test-on-android to main May 14, 2026 05:50
@andrascodes andrascodes force-pushed the andras/feat-react-enable-oauth-in-react-native branch from 8944716 to 425ad67 Compare May 14, 2026 05:50
@andrascodes andrascodes merged commit 09425e7 into main May 14, 2026
16 of 17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants