fix(expo): Sanitize stray hash fragment in SSO callback URL

.changeset/expo-callback-nonce-hash.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': patch
+---
+
+Fixed SSO sign-ins failing with a 401 `signed_out` error when the OAuth callback URL carries a stray `#` on the `rotating_token_nonce` parameter, as seen on iOS.

packages/expo/src/hooks/useHostedAuth.ts

@@ -5,6 +5,7 @@ import type * as WebBrowser from 'expo-web-browser';
 import { Platform } from 'react-native';
 
 import { getClerkInstance } from '../provider/singleton';
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 import type { HostedAuthClerkInstance, HostedAuthMode } from '../utils/hostedAuth';
 import { applyHostedAuthClientJSON, createHostedAuth, redeemHostedAuth } from '../utils/hostedAuth';
@@ -159,17 +160,16 @@ export function useHostedAuth(): {
  return errorThrower.throw('Hosted auth callback URL did not match the initiated redirect URL.');
  }
 
- const callbackParams = callbackUrl.searchParams;
- if (callbackParams.get('state') !== state) {
+ if (getAuthSessionCallbackParam(authSessionResult.url, 'state') !== state) {
  return errorThrower.throw('Hosted auth callback state did not match the initiated state.');
  }
 
- const rotatingTokenNonce = callbackParams.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  if (!rotatingTokenNonce) {
  return errorThrower.throw('Hosted auth callback did not include a rotating token nonce.');
  }
 
- const createdSessionId = callbackParams.get('created_session_id');
+ const createdSessionId = getAuthSessionCallbackParam(authSessionResult.url, 'created_session_id');
  if (!createdSessionId) {
  return errorThrower.throw('Hosted auth callback did not include the created session.');
  }

packages/expo/src/hooks/useOAuth.ts

@@ -2,6 +2,7 @@ import { useSignIn, useSignUp } from '@clerk/react/legacy';
 import type { OAuthStrategy, SetActive, SignInResource, SignUpResource } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type UseOAuthFlowParams = {
@@ -98,9 +99,7 @@ export function useOAuth(useOAuthParams: UseOAuthFlowParams) {
  };
  }
 
- const params = new URL(url).searchParams;
-
- const rotatingTokenNonce = params.get('rotating_token_nonce') || '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(url, 'rotating_token_nonce') || '';
  await signIn.reload({ rotatingTokenNonce });
 
  const { status, firstFactorVerification } = signIn;

packages/expo/src/hooks/useSSO.ts

@@ -8,6 +8,7 @@ import type {
 } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type StartSSOFlowParams = {
@@ -106,8 +107,7 @@ export function useSSO() {
  };
  }
 
- const params = new URL(authSessionResult.url).searchParams;
- const rotatingTokenNonce = params.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  await signIn.reload({ rotatingTokenNonce });
 
  const userNeedsToBeCreated = signIn.firstFactorVerification.status === 'transferable';

packages/expo/src/utils/__tests__/authSessionCallback.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+
+import { getAuthSessionCallbackParam } from '../authSessionCallback';
+
+describe('getAuthSessionCallbackParam', () => {
+ test.each([
+ ['a clean URL', 'myapp://sso-callback?rotating_token_nonce=abc123'],
+ ['a literal trailing fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#'],
+ ['a Facebook-style fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#_=_'],
+ ['a percent-encoded trailing hash', 'myapp://sso-callback?rotating_token_nonce=abc123%23'],
+ ['a percent-encoded hash with a suffix', 'myapp://sso-callback?rotating_token_nonce=abc123%23_=_'],
+ ])('returns a clean value given %s', (_, url) => {
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('leaves params before a corrupted last param intact', () => {
+ const url = 'myapp:?created_session_id=sess_1&rotating_token_nonce=abc123%23';
+ expect(getAuthSessionCallbackParam(url, 'created_session_id')).toBe('sess_1');
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('returns null when the param is missing', () => {
+ expect(
+ getAuthSessionCallbackParam('myapp://sso-callback?created_session_id=sess_1', 'rotating_token_nonce'),
+ ).toBeNull();
+ });
+
+ test('returns null for an unparsable URL', () => {
+ expect(getAuthSessionCallbackParam('not a url', 'rotating_token_nonce')).toBeNull();
+ });
+});

packages/expo/src/utils/authSessionCallback.ts

@@ -0,0 +1,11 @@
+// OAuth redirect chains can leave a stray `#` on the callback URL, literal or percent-encoded
+// into the last query value, so strip it from both the URL and the extracted value.
+export function getAuthSessionCallbackParam(url: string, name: string): string | null {
+ let value: string | null;
+ try {
+ value = new URL(url.split('#')[0]).searchParams.get(name);
+ } catch {
+ return null;
+ }
+ return value?.split('#')[0] ?? null;
+}

.changeset/expo-callback-nonce-hash.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': patch
+---
+
+Fixed SSO sign-ins failing with a 401 `signed_out` error when the OAuth callback URL carries a stray `#` on the `rotating_token_nonce` parameter, as seen on iOS.

packages/expo/src/hooks/useHostedAuth.ts

@@ -5,6 +5,7 @@ import type * as WebBrowser from 'expo-web-browser';
 import { Platform } from 'react-native';
 
 import { getClerkInstance } from '../provider/singleton';
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 import type { HostedAuthClerkInstance, HostedAuthMode } from '../utils/hostedAuth';
 import { applyHostedAuthClientJSON, createHostedAuth, redeemHostedAuth } from '../utils/hostedAuth';
@@ -159,17 +160,16 @@ export function useHostedAuth(): {
  return errorThrower.throw('Hosted auth callback URL did not match the initiated redirect URL.');
  }
 
- const callbackParams = callbackUrl.searchParams;
- if (callbackParams.get('state') !== state) {
+ if (getAuthSessionCallbackParam(authSessionResult.url, 'state') !== state) {
  return errorThrower.throw('Hosted auth callback state did not match the initiated state.');
  }
 
- const rotatingTokenNonce = callbackParams.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  if (!rotatingTokenNonce) {
  return errorThrower.throw('Hosted auth callback did not include a rotating token nonce.');
  }
 
- const createdSessionId = callbackParams.get('created_session_id');
+ const createdSessionId = getAuthSessionCallbackParam(authSessionResult.url, 'created_session_id');
  if (!createdSessionId) {
  return errorThrower.throw('Hosted auth callback did not include the created session.');
  }

packages/expo/src/hooks/useOAuth.ts

@@ -2,6 +2,7 @@ import { useSignIn, useSignUp } from '@clerk/react/legacy';
 import type { OAuthStrategy, SetActive, SignInResource, SignUpResource } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type UseOAuthFlowParams = {
@@ -98,9 +99,7 @@ export function useOAuth(useOAuthParams: UseOAuthFlowParams) {
  };
  }
 
- const params = new URL(url).searchParams;
-
- const rotatingTokenNonce = params.get('rotating_token_nonce') || '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(url, 'rotating_token_nonce') || '';
  await signIn.reload({ rotatingTokenNonce });
 
  const { status, firstFactorVerification } = signIn;

packages/expo/src/hooks/useSSO.ts

@@ -8,6 +8,7 @@ import type {
 } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type StartSSOFlowParams = {
@@ -106,8 +107,7 @@ export function useSSO() {
  };
  }
 
- const params = new URL(authSessionResult.url).searchParams;
- const rotatingTokenNonce = params.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  await signIn.reload({ rotatingTokenNonce });
 
  const userNeedsToBeCreated = signIn.firstFactorVerification.status === 'transferable';

packages/expo/src/utils/__tests__/authSessionCallback.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+
+import { getAuthSessionCallbackParam } from '../authSessionCallback';
+
+describe('getAuthSessionCallbackParam', () => {
+ test.each([
+ ['a clean URL', 'myapp://sso-callback?rotating_token_nonce=abc123'],
+ ['a literal trailing fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#'],
+ ['a Facebook-style fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#_=_'],
+ ['a percent-encoded trailing hash', 'myapp://sso-callback?rotating_token_nonce=abc123%23'],
+ ['a percent-encoded hash with a suffix', 'myapp://sso-callback?rotating_token_nonce=abc123%23_=_'],
+ ])('returns a clean value given %s', (_, url) => {
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('leaves params before a corrupted last param intact', () => {
+ const url = 'myapp:?created_session_id=sess_1&rotating_token_nonce=abc123%23';
+ expect(getAuthSessionCallbackParam(url, 'created_session_id')).toBe('sess_1');
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('returns null when the param is missing', () => {
+ expect(
+ getAuthSessionCallbackParam('myapp://sso-callback?created_session_id=sess_1', 'rotating_token_nonce'),
+ ).toBeNull();
+ });
+
+ test('returns null for an unparsable URL', () => {
+ expect(getAuthSessionCallbackParam('not a url', 'rotating_token_nonce')).toBeNull();
+ });
+});

packages/expo/src/utils/authSessionCallback.ts

@@ -0,0 +1,11 @@
+// OAuth redirect chains can leave a stray `#` on the callback URL, literal or percent-encoded
+// into the last query value, so strip it from both the URL and the extracted value.
+export function getAuthSessionCallbackParam(url: string, name: string): string | null {
+ let value: string | null;
+ try {
+ value = new URL(url.split('#')[0]).searchParams.get(name);
+ } catch {
+ return null;
+ }
+ return value?.split('#')[0] ?? null;
+}

.changeset/expo-callback-nonce-hash.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': patch
+---
+
+Fixed SSO sign-ins failing with a 401 `signed_out` error when the OAuth callback URL carries a stray `#` on the `rotating_token_nonce` parameter, as seen on iOS.

packages/expo/src/hooks/useHostedAuth.ts

@@ -5,6 +5,7 @@ import type * as WebBrowser from 'expo-web-browser';
 import { Platform } from 'react-native';
 
 import { getClerkInstance } from '../provider/singleton';
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 import type { HostedAuthClerkInstance, HostedAuthMode } from '../utils/hostedAuth';
 import { applyHostedAuthClientJSON, createHostedAuth, redeemHostedAuth } from '../utils/hostedAuth';
@@ -159,17 +160,16 @@ export function useHostedAuth(): {
  return errorThrower.throw('Hosted auth callback URL did not match the initiated redirect URL.');
  }
 
- const callbackParams = callbackUrl.searchParams;
- if (callbackParams.get('state') !== state) {
+ if (getAuthSessionCallbackParam(authSessionResult.url, 'state') !== state) {
  return errorThrower.throw('Hosted auth callback state did not match the initiated state.');
  }
 
- const rotatingTokenNonce = callbackParams.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  if (!rotatingTokenNonce) {
  return errorThrower.throw('Hosted auth callback did not include a rotating token nonce.');
  }
 
- const createdSessionId = callbackParams.get('created_session_id');
+ const createdSessionId = getAuthSessionCallbackParam(authSessionResult.url, 'created_session_id');
  if (!createdSessionId) {
  return errorThrower.throw('Hosted auth callback did not include the created session.');
  }

packages/expo/src/hooks/useOAuth.ts

@@ -2,6 +2,7 @@ import { useSignIn, useSignUp } from '@clerk/react/legacy';
 import type { OAuthStrategy, SetActive, SignInResource, SignUpResource } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type UseOAuthFlowParams = {
@@ -98,9 +99,7 @@ export function useOAuth(useOAuthParams: UseOAuthFlowParams) {
  };
  }
 
- const params = new URL(url).searchParams;
-
- const rotatingTokenNonce = params.get('rotating_token_nonce') || '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(url, 'rotating_token_nonce') || '';
  await signIn.reload({ rotatingTokenNonce });
 
  const { status, firstFactorVerification } = signIn;

packages/expo/src/hooks/useSSO.ts

@@ -8,6 +8,7 @@ import type {
 } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type StartSSOFlowParams = {
@@ -106,8 +107,7 @@ export function useSSO() {
  };
  }
 
- const params = new URL(authSessionResult.url).searchParams;
- const rotatingTokenNonce = params.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  await signIn.reload({ rotatingTokenNonce });
 
  const userNeedsToBeCreated = signIn.firstFactorVerification.status === 'transferable';

packages/expo/src/utils/__tests__/authSessionCallback.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+
+import { getAuthSessionCallbackParam } from '../authSessionCallback';
+
+describe('getAuthSessionCallbackParam', () => {
+ test.each([
+ ['a clean URL', 'myapp://sso-callback?rotating_token_nonce=abc123'],
+ ['a literal trailing fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#'],
+ ['a Facebook-style fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#_=_'],
+ ['a percent-encoded trailing hash', 'myapp://sso-callback?rotating_token_nonce=abc123%23'],
+ ['a percent-encoded hash with a suffix', 'myapp://sso-callback?rotating_token_nonce=abc123%23_=_'],
+ ])('returns a clean value given %s', (_, url) => {
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('leaves params before a corrupted last param intact', () => {
+ const url = 'myapp:?created_session_id=sess_1&rotating_token_nonce=abc123%23';
+ expect(getAuthSessionCallbackParam(url, 'created_session_id')).toBe('sess_1');
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('returns null when the param is missing', () => {
+ expect(
+ getAuthSessionCallbackParam('myapp://sso-callback?created_session_id=sess_1', 'rotating_token_nonce'),
+ ).toBeNull();
+ });
+
+ test('returns null for an unparsable URL', () => {
+ expect(getAuthSessionCallbackParam('not a url', 'rotating_token_nonce')).toBeNull();
+ });
+});

packages/expo/src/utils/authSessionCallback.ts

@@ -0,0 +1,11 @@
+// OAuth redirect chains can leave a stray `#` on the callback URL, literal or percent-encoded
+// into the last query value, so strip it from both the URL and the extracted value.
+export function getAuthSessionCallbackParam(url: string, name: string): string | null {
+ let value: string | null;
+ try {
+ value = new URL(url.split('#')[0]).searchParams.get(name);
+ } catch {
+ return null;
+ }
+ return value?.split('#')[0] ?? null;
+}

.changeset/expo-callback-nonce-hash.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': patch
+---
+
+Fixed SSO sign-ins failing with a 401 `signed_out` error when the OAuth callback URL carries a stray `#` on the `rotating_token_nonce` parameter, as seen on iOS.

packages/expo/src/hooks/useHostedAuth.ts

@@ -5,6 +5,7 @@ import type * as WebBrowser from 'expo-web-browser';
 import { Platform } from 'react-native';
 
 import { getClerkInstance } from '../provider/singleton';
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 import type { HostedAuthClerkInstance, HostedAuthMode } from '../utils/hostedAuth';
 import { applyHostedAuthClientJSON, createHostedAuth, redeemHostedAuth } from '../utils/hostedAuth';
@@ -159,17 +160,16 @@ export function useHostedAuth(): {
  return errorThrower.throw('Hosted auth callback URL did not match the initiated redirect URL.');
  }
 
- const callbackParams = callbackUrl.searchParams;
- if (callbackParams.get('state') !== state) {
+ if (getAuthSessionCallbackParam(authSessionResult.url, 'state') !== state) {
  return errorThrower.throw('Hosted auth callback state did not match the initiated state.');
  }
 
- const rotatingTokenNonce = callbackParams.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  if (!rotatingTokenNonce) {
  return errorThrower.throw('Hosted auth callback did not include a rotating token nonce.');
  }
 
- const createdSessionId = callbackParams.get('created_session_id');
+ const createdSessionId = getAuthSessionCallbackParam(authSessionResult.url, 'created_session_id');
  if (!createdSessionId) {
  return errorThrower.throw('Hosted auth callback did not include the created session.');
  }

packages/expo/src/hooks/useOAuth.ts

@@ -2,6 +2,7 @@ import { useSignIn, useSignUp } from '@clerk/react/legacy';
 import type { OAuthStrategy, SetActive, SignInResource, SignUpResource } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type UseOAuthFlowParams = {
@@ -98,9 +99,7 @@ export function useOAuth(useOAuthParams: UseOAuthFlowParams) {
  };
  }
 
- const params = new URL(url).searchParams;
-
- const rotatingTokenNonce = params.get('rotating_token_nonce') || '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(url, 'rotating_token_nonce') || '';
  await signIn.reload({ rotatingTokenNonce });
 
  const { status, firstFactorVerification } = signIn;

packages/expo/src/hooks/useSSO.ts

@@ -8,6 +8,7 @@ import type {
 } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type StartSSOFlowParams = {
@@ -106,8 +107,7 @@ export function useSSO() {
  };
  }
 
- const params = new URL(authSessionResult.url).searchParams;
- const rotatingTokenNonce = params.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  await signIn.reload({ rotatingTokenNonce });
 
  const userNeedsToBeCreated = signIn.firstFactorVerification.status === 'transferable';

packages/expo/src/utils/__tests__/authSessionCallback.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+
+import { getAuthSessionCallbackParam } from '../authSessionCallback';
+
+describe('getAuthSessionCallbackParam', () => {
+ test.each([
+ ['a clean URL', 'myapp://sso-callback?rotating_token_nonce=abc123'],
+ ['a literal trailing fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#'],
+ ['a Facebook-style fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#_=_'],
+ ['a percent-encoded trailing hash', 'myapp://sso-callback?rotating_token_nonce=abc123%23'],
+ ['a percent-encoded hash with a suffix', 'myapp://sso-callback?rotating_token_nonce=abc123%23_=_'],
+ ])('returns a clean value given %s', (_, url) => {
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('leaves params before a corrupted last param intact', () => {
+ const url = 'myapp:?created_session_id=sess_1&rotating_token_nonce=abc123%23';
+ expect(getAuthSessionCallbackParam(url, 'created_session_id')).toBe('sess_1');
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('returns null when the param is missing', () => {
+ expect(
+ getAuthSessionCallbackParam('myapp://sso-callback?created_session_id=sess_1', 'rotating_token_nonce'),
+ ).toBeNull();
+ });
+
+ test('returns null for an unparsable URL', () => {
+ expect(getAuthSessionCallbackParam('not a url', 'rotating_token_nonce')).toBeNull();
+ });
+});

packages/expo/src/utils/authSessionCallback.ts

@@ -0,0 +1,11 @@
+// OAuth redirect chains can leave a stray `#` on the callback URL, literal or percent-encoded
+// into the last query value, so strip it from both the URL and the extracted value.
+export function getAuthSessionCallbackParam(url: string, name: string): string | null {
+ let value: string | null;
+ try {
+ value = new URL(url.split('#')[0]).searchParams.get(name);
+ } catch {
+ return null;
+ }
+ return value?.split('#')[0] ?? null;
+}

.changeset/expo-callback-nonce-hash.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': patch
+---
+
+Fixed SSO sign-ins failing with a 401 `signed_out` error when the OAuth callback URL carries a stray `#` on the `rotating_token_nonce` parameter, as seen on iOS.

packages/expo/src/hooks/useHostedAuth.ts

@@ -5,6 +5,7 @@ import type * as WebBrowser from 'expo-web-browser';
 import { Platform } from 'react-native';
 
 import { getClerkInstance } from '../provider/singleton';
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 import type { HostedAuthClerkInstance, HostedAuthMode } from '../utils/hostedAuth';
 import { applyHostedAuthClientJSON, createHostedAuth, redeemHostedAuth } from '../utils/hostedAuth';
@@ -159,17 +160,16 @@ export function useHostedAuth(): {
  return errorThrower.throw('Hosted auth callback URL did not match the initiated redirect URL.');
  }
 
- const callbackParams = callbackUrl.searchParams;
- if (callbackParams.get('state') !== state) {
+ if (getAuthSessionCallbackParam(authSessionResult.url, 'state') !== state) {
  return errorThrower.throw('Hosted auth callback state did not match the initiated state.');
  }
 
- const rotatingTokenNonce = callbackParams.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  if (!rotatingTokenNonce) {
  return errorThrower.throw('Hosted auth callback did not include a rotating token nonce.');
  }
 
- const createdSessionId = callbackParams.get('created_session_id');
+ const createdSessionId = getAuthSessionCallbackParam(authSessionResult.url, 'created_session_id');
  if (!createdSessionId) {
  return errorThrower.throw('Hosted auth callback did not include the created session.');
  }

packages/expo/src/hooks/useOAuth.ts

@@ -2,6 +2,7 @@ import { useSignIn, useSignUp } from '@clerk/react/legacy';
 import type { OAuthStrategy, SetActive, SignInResource, SignUpResource } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type UseOAuthFlowParams = {
@@ -98,9 +99,7 @@ export function useOAuth(useOAuthParams: UseOAuthFlowParams) {
  };
  }
 
- const params = new URL(url).searchParams;
-
- const rotatingTokenNonce = params.get('rotating_token_nonce') || '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(url, 'rotating_token_nonce') || '';
  await signIn.reload({ rotatingTokenNonce });
 
  const { status, firstFactorVerification } = signIn;

packages/expo/src/hooks/useSSO.ts

@@ -8,6 +8,7 @@ import type {
 } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type StartSSOFlowParams = {
@@ -106,8 +107,7 @@ export function useSSO() {
  };
  }
 
- const params = new URL(authSessionResult.url).searchParams;
- const rotatingTokenNonce = params.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  await signIn.reload({ rotatingTokenNonce });
 
  const userNeedsToBeCreated = signIn.firstFactorVerification.status === 'transferable';

packages/expo/src/utils/__tests__/authSessionCallback.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+
+import { getAuthSessionCallbackParam } from '../authSessionCallback';
+
+describe('getAuthSessionCallbackParam', () => {
+ test.each([
+ ['a clean URL', 'myapp://sso-callback?rotating_token_nonce=abc123'],
+ ['a literal trailing fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#'],
+ ['a Facebook-style fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#_=_'],
+ ['a percent-encoded trailing hash', 'myapp://sso-callback?rotating_token_nonce=abc123%23'],
+ ['a percent-encoded hash with a suffix', 'myapp://sso-callback?rotating_token_nonce=abc123%23_=_'],
+ ])('returns a clean value given %s', (_, url) => {
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('leaves params before a corrupted last param intact', () => {
+ const url = 'myapp:?created_session_id=sess_1&rotating_token_nonce=abc123%23';
+ expect(getAuthSessionCallbackParam(url, 'created_session_id')).toBe('sess_1');
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('returns null when the param is missing', () => {
+ expect(
+ getAuthSessionCallbackParam('myapp://sso-callback?created_session_id=sess_1', 'rotating_token_nonce'),
+ ).toBeNull();
+ });
+
+ test('returns null for an unparsable URL', () => {
+ expect(getAuthSessionCallbackParam('not a url', 'rotating_token_nonce')).toBeNull();
+ });
+});

packages/expo/src/utils/authSessionCallback.ts

@@ -0,0 +1,11 @@
+// OAuth redirect chains can leave a stray `#` on the callback URL, literal or percent-encoded
+// into the last query value, so strip it from both the URL and the extracted value.
+export function getAuthSessionCallbackParam(url: string, name: string): string | null {
+ let value: string | null;
+ try {
+ value = new URL(url.split('#')[0]).searchParams.get(name);
+ } catch {
+ return null;
+ }
+ return value?.split('#')[0] ?? null;
+}

.changeset/expo-callback-nonce-hash.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': patch
+---
+
+Fixed SSO sign-ins failing with a 401 `signed_out` error when the OAuth callback URL carries a stray `#` on the `rotating_token_nonce` parameter, as seen on iOS.

packages/expo/src/hooks/useHostedAuth.ts

@@ -5,6 +5,7 @@ import type * as WebBrowser from 'expo-web-browser';
 import { Platform } from 'react-native';
 
 import { getClerkInstance } from '../provider/singleton';
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 import type { HostedAuthClerkInstance, HostedAuthMode } from '../utils/hostedAuth';
 import { applyHostedAuthClientJSON, createHostedAuth, redeemHostedAuth } from '../utils/hostedAuth';
@@ -159,17 +160,16 @@ export function useHostedAuth(): {
  return errorThrower.throw('Hosted auth callback URL did not match the initiated redirect URL.');
  }
 
- const callbackParams = callbackUrl.searchParams;
- if (callbackParams.get('state') !== state) {
+ if (getAuthSessionCallbackParam(authSessionResult.url, 'state') !== state) {
  return errorThrower.throw('Hosted auth callback state did not match the initiated state.');
  }
 
- const rotatingTokenNonce = callbackParams.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  if (!rotatingTokenNonce) {
  return errorThrower.throw('Hosted auth callback did not include a rotating token nonce.');
  }
 
- const createdSessionId = callbackParams.get('created_session_id');
+ const createdSessionId = getAuthSessionCallbackParam(authSessionResult.url, 'created_session_id');
  if (!createdSessionId) {
  return errorThrower.throw('Hosted auth callback did not include the created session.');
  }

packages/expo/src/hooks/useOAuth.ts

@@ -2,6 +2,7 @@ import { useSignIn, useSignUp } from '@clerk/react/legacy';
 import type { OAuthStrategy, SetActive, SignInResource, SignUpResource } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type UseOAuthFlowParams = {
@@ -98,9 +99,7 @@ export function useOAuth(useOAuthParams: UseOAuthFlowParams) {
  };
  }
 
- const params = new URL(url).searchParams;
-
- const rotatingTokenNonce = params.get('rotating_token_nonce') || '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(url, 'rotating_token_nonce') || '';
  await signIn.reload({ rotatingTokenNonce });
 
  const { status, firstFactorVerification } = signIn;

packages/expo/src/hooks/useSSO.ts

@@ -8,6 +8,7 @@ import type {
 } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type StartSSOFlowParams = {
@@ -106,8 +107,7 @@ export function useSSO() {
  };
  }
 
- const params = new URL(authSessionResult.url).searchParams;
- const rotatingTokenNonce = params.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  await signIn.reload({ rotatingTokenNonce });
 
  const userNeedsToBeCreated = signIn.firstFactorVerification.status === 'transferable';

packages/expo/src/utils/__tests__/authSessionCallback.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+
+import { getAuthSessionCallbackParam } from '../authSessionCallback';
+
+describe('getAuthSessionCallbackParam', () => {
+ test.each([
+ ['a clean URL', 'myapp://sso-callback?rotating_token_nonce=abc123'],
+ ['a literal trailing fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#'],
+ ['a Facebook-style fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#_=_'],
+ ['a percent-encoded trailing hash', 'myapp://sso-callback?rotating_token_nonce=abc123%23'],
+ ['a percent-encoded hash with a suffix', 'myapp://sso-callback?rotating_token_nonce=abc123%23_=_'],
+ ])('returns a clean value given %s', (_, url) => {
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('leaves params before a corrupted last param intact', () => {
+ const url = 'myapp:?created_session_id=sess_1&rotating_token_nonce=abc123%23';
+ expect(getAuthSessionCallbackParam(url, 'created_session_id')).toBe('sess_1');
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('returns null when the param is missing', () => {
+ expect(
+ getAuthSessionCallbackParam('myapp://sso-callback?created_session_id=sess_1', 'rotating_token_nonce'),
+ ).toBeNull();
+ });
+
+ test('returns null for an unparsable URL', () => {
+ expect(getAuthSessionCallbackParam('not a url', 'rotating_token_nonce')).toBeNull();
+ });
+});

packages/expo/src/utils/authSessionCallback.ts

@@ -0,0 +1,11 @@
+// OAuth redirect chains can leave a stray `#` on the callback URL, literal or percent-encoded
+// into the last query value, so strip it from both the URL and the extracted value.
+export function getAuthSessionCallbackParam(url: string, name: string): string | null {
+ let value: string | null;
+ try {
+ value = new URL(url.split('#')[0]).searchParams.get(name);
+ } catch {
+ return null;
+ }
+ return value?.split('#')[0] ?? null;
+}

.changeset/expo-callback-nonce-hash.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': patch
+---
+
+Fixed SSO sign-ins failing with a 401 `signed_out` error when the OAuth callback URL carries a stray `#` on the `rotating_token_nonce` parameter, as seen on iOS.

packages/expo/src/hooks/useHostedAuth.ts

@@ -5,6 +5,7 @@ import type * as WebBrowser from 'expo-web-browser';
 import { Platform } from 'react-native';
 
 import { getClerkInstance } from '../provider/singleton';
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 import type { HostedAuthClerkInstance, HostedAuthMode } from '../utils/hostedAuth';
 import { applyHostedAuthClientJSON, createHostedAuth, redeemHostedAuth } from '../utils/hostedAuth';
@@ -159,17 +160,16 @@ export function useHostedAuth(): {
  return errorThrower.throw('Hosted auth callback URL did not match the initiated redirect URL.');
  }
 
- const callbackParams = callbackUrl.searchParams;
- if (callbackParams.get('state') !== state) {
+ if (getAuthSessionCallbackParam(authSessionResult.url, 'state') !== state) {
  return errorThrower.throw('Hosted auth callback state did not match the initiated state.');
  }
 
- const rotatingTokenNonce = callbackParams.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  if (!rotatingTokenNonce) {
  return errorThrower.throw('Hosted auth callback did not include a rotating token nonce.');
  }
 
- const createdSessionId = callbackParams.get('created_session_id');
+ const createdSessionId = getAuthSessionCallbackParam(authSessionResult.url, 'created_session_id');
  if (!createdSessionId) {
  return errorThrower.throw('Hosted auth callback did not include the created session.');
  }

packages/expo/src/hooks/useOAuth.ts

@@ -2,6 +2,7 @@ import { useSignIn, useSignUp } from '@clerk/react/legacy';
 import type { OAuthStrategy, SetActive, SignInResource, SignUpResource } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type UseOAuthFlowParams = {
@@ -98,9 +99,7 @@ export function useOAuth(useOAuthParams: UseOAuthFlowParams) {
  };
  }
 
- const params = new URL(url).searchParams;
-
- const rotatingTokenNonce = params.get('rotating_token_nonce') || '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(url, 'rotating_token_nonce') || '';
  await signIn.reload({ rotatingTokenNonce });
 
  const { status, firstFactorVerification } = signIn;

packages/expo/src/hooks/useSSO.ts

@@ -8,6 +8,7 @@ import type {
 } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type StartSSOFlowParams = {
@@ -106,8 +107,7 @@ export function useSSO() {
  };
  }
 
- const params = new URL(authSessionResult.url).searchParams;
- const rotatingTokenNonce = params.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  await signIn.reload({ rotatingTokenNonce });
 
  const userNeedsToBeCreated = signIn.firstFactorVerification.status === 'transferable';

packages/expo/src/utils/__tests__/authSessionCallback.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+
+import { getAuthSessionCallbackParam } from '../authSessionCallback';
+
+describe('getAuthSessionCallbackParam', () => {
+ test.each([
+ ['a clean URL', 'myapp://sso-callback?rotating_token_nonce=abc123'],
+ ['a literal trailing fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#'],
+ ['a Facebook-style fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#_=_'],
+ ['a percent-encoded trailing hash', 'myapp://sso-callback?rotating_token_nonce=abc123%23'],
+ ['a percent-encoded hash with a suffix', 'myapp://sso-callback?rotating_token_nonce=abc123%23_=_'],
+ ])('returns a clean value given %s', (_, url) => {
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('leaves params before a corrupted last param intact', () => {
+ const url = 'myapp:?created_session_id=sess_1&rotating_token_nonce=abc123%23';
+ expect(getAuthSessionCallbackParam(url, 'created_session_id')).toBe('sess_1');
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('returns null when the param is missing', () => {
+ expect(
+ getAuthSessionCallbackParam('myapp://sso-callback?created_session_id=sess_1', 'rotating_token_nonce'),
+ ).toBeNull();
+ });
+
+ test('returns null for an unparsable URL', () => {
+ expect(getAuthSessionCallbackParam('not a url', 'rotating_token_nonce')).toBeNull();
+ });
+});

packages/expo/src/utils/authSessionCallback.ts

@@ -0,0 +1,11 @@
+// OAuth redirect chains can leave a stray `#` on the callback URL, literal or percent-encoded
+// into the last query value, so strip it from both the URL and the extracted value.
+export function getAuthSessionCallbackParam(url: string, name: string): string | null {
+ let value: string | null;
+ try {
+ value = new URL(url.split('#')[0]).searchParams.get(name);
+ } catch {
+ return null;
+ }
+ return value?.split('#')[0] ?? null;
+}

.changeset/expo-callback-nonce-hash.md

@@ -0,0 +1,5 @@
+---
+'@clerk/expo': patch
+---
+
+Fixed SSO sign-ins failing with a 401 `signed_out` error when the OAuth callback URL carries a stray `#` on the `rotating_token_nonce` parameter, as seen on iOS.

packages/expo/src/hooks/useHostedAuth.ts

@@ -5,6 +5,7 @@ import type * as WebBrowser from 'expo-web-browser';
 import { Platform } from 'react-native';
 
 import { getClerkInstance } from '../provider/singleton';
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 import type { HostedAuthClerkInstance, HostedAuthMode } from '../utils/hostedAuth';
 import { applyHostedAuthClientJSON, createHostedAuth, redeemHostedAuth } from '../utils/hostedAuth';
@@ -159,17 +160,16 @@ export function useHostedAuth(): {
  return errorThrower.throw('Hosted auth callback URL did not match the initiated redirect URL.');
  }
 
- const callbackParams = callbackUrl.searchParams;
- if (callbackParams.get('state') !== state) {
+ if (getAuthSessionCallbackParam(authSessionResult.url, 'state') !== state) {
  return errorThrower.throw('Hosted auth callback state did not match the initiated state.');
  }
 
- const rotatingTokenNonce = callbackParams.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  if (!rotatingTokenNonce) {
  return errorThrower.throw('Hosted auth callback did not include a rotating token nonce.');
  }
 
- const createdSessionId = callbackParams.get('created_session_id');
+ const createdSessionId = getAuthSessionCallbackParam(authSessionResult.url, 'created_session_id');
  if (!createdSessionId) {
  return errorThrower.throw('Hosted auth callback did not include the created session.');
  }

packages/expo/src/hooks/useOAuth.ts

@@ -2,6 +2,7 @@ import { useSignIn, useSignUp } from '@clerk/react/legacy';
 import type { OAuthStrategy, SetActive, SignInResource, SignUpResource } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type UseOAuthFlowParams = {
@@ -98,9 +99,7 @@ export function useOAuth(useOAuthParams: UseOAuthFlowParams) {
  };
  }
 
- const params = new URL(url).searchParams;
-
- const rotatingTokenNonce = params.get('rotating_token_nonce') || '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(url, 'rotating_token_nonce') || '';
  await signIn.reload({ rotatingTokenNonce });
 
  const { status, firstFactorVerification } = signIn;

packages/expo/src/hooks/useSSO.ts

@@ -8,6 +8,7 @@ import type {
 } from '@clerk/shared/types';
 import type * as WebBrowser from 'expo-web-browser';
 
+import { getAuthSessionCallbackParam } from '../utils/authSessionCallback';
 import { errorThrower } from '../utils/errors';
 
 export type StartSSOFlowParams = {
@@ -106,8 +107,7 @@ export function useSSO() {
  };
  }
 
- const params = new URL(authSessionResult.url).searchParams;
- const rotatingTokenNonce = params.get('rotating_token_nonce') ?? '';
+ const rotatingTokenNonce = getAuthSessionCallbackParam(authSessionResult.url, 'rotating_token_nonce') ?? '';
  await signIn.reload({ rotatingTokenNonce });
 
  const userNeedsToBeCreated = signIn.firstFactorVerification.status === 'transferable';

packages/expo/src/utils/__tests__/authSessionCallback.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+
+import { getAuthSessionCallbackParam } from '../authSessionCallback';
+
+describe('getAuthSessionCallbackParam', () => {
+ test.each([
+ ['a clean URL', 'myapp://sso-callback?rotating_token_nonce=abc123'],
+ ['a literal trailing fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#'],
+ ['a Facebook-style fragment', 'myapp://sso-callback?rotating_token_nonce=abc123#_=_'],
+ ['a percent-encoded trailing hash', 'myapp://sso-callback?rotating_token_nonce=abc123%23'],
+ ['a percent-encoded hash with a suffix', 'myapp://sso-callback?rotating_token_nonce=abc123%23_=_'],
+ ])('returns a clean value given %s', (_, url) => {
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('leaves params before a corrupted last param intact', () => {
+ const url = 'myapp:?created_session_id=sess_1&rotating_token_nonce=abc123%23';
+ expect(getAuthSessionCallbackParam(url, 'created_session_id')).toBe('sess_1');
+ expect(getAuthSessionCallbackParam(url, 'rotating_token_nonce')).toBe('abc123');
+ });
+
+ test('returns null when the param is missing', () => {
+ expect(
+ getAuthSessionCallbackParam('myapp://sso-callback?created_session_id=sess_1', 'rotating_token_nonce'),
+ ).toBeNull();
+ });
+
+ test('returns null for an unparsable URL', () => {
+ expect(getAuthSessionCallbackParam('not a url', 'rotating_token_nonce')).toBeNull();
+ });
+});

packages/expo/src/utils/authSessionCallback.ts

@@ -0,0 +1,11 @@
+// OAuth redirect chains can leave a stray `#` on the callback URL, literal or percent-encoded
+// into the last query value, so strip it from both the URL and the extracted value.
+export function getAuthSessionCallbackParam(url: string, name: string): string | null {
+ let value: string | null;
+ try {
+ value = new URL(url.split('#')[0]).searchParams.get(name);
+ } catch {
+ return null;
+ }
+ return value?.split('#')[0] ?? null;
+}