Using OAuth in React Native but getting error "login_magic_link_url format is invalid"

Questions
,
1

Hello,

I’m trying to integrate Stytch with OAuth in my React Native app. When I initiate the OAuth flow using stytch.oauth.google.start the in-app browser correctly opens stytch.com but I receive the following error on the web page (request ID included):

{"status_code":400,"request_id":"request-id-test-e621f865-52f2-456d-83a1-564d92b839a9","error_type":"invalid_login_magic_link_url","error_message":"login_magic_link_url format is invalid. Common issues include using http instead of https or omitting https://.","error_url":"https://stytch.com/docs/api/errors/400#invalid_login_magic_link_url"}

I’m not using magic links so I’m a bit confused as to why the error is relating to magic links. I’ve tried using v49.1, v48.0 and v47.2 versions of the @stytch/react-native package. What could be causing the magic link error response when I used the OAuth flow?

Here is my simplified app code setup:

// App.tsx
const publicToken = process.env.EXPO_PUBLIC_STYTCH_PUBLIC_TOKEN;
const stytch = new StytchClient(publicToken);

export const App = () => (
  <StytchProvider stytch={stytch}>
    {/* rest of my app */}
  </StytchProvider>
);
// end App.tsx

// ProfileScreen.tsx
const redirectUrl = "myappscheme//Authenticate"; // setup to deep link to AuthenticateScreen.tsx

export const ProfileScreen = () => {
  const stytch = useStytch();
  const { user } = useStytchUser();

  const signInWithGoogle = () => {
    stytch.oauth.google.start({
      login_redirect_url: redirectUrl,
      signup_redirect_url: redirectUrl,
      onCompleteCallback: () => {
        console.log("onCompleteCallback");
      },
    });
  };

  const signOut = () => {
    stytch.session.revoke();
  };

  return (
    <View>
      <Text>Profile screen</Text>
      {user ? (
        <>
          <Text>Welcome, {user.name.first_name}</Text>
          <Button onPress={signOut}>Sign out</Button>
        </>
      ) : (
        <Button onPress={signInWithGoogle}>Sign in</Button>
      )}
    </View>
  );
};
// end ProfileScreen.tsx

// AuthenticateScreen.tsx
type AuthenticateScreenProps = StaticScreenProps<{
  token: string;
}>;

export const AuthenticateScreen = (props: AuthenticateScreenProps) => {
  const { token } = props.route.params;
  const stytch = useStytch();

  useEffect(() => {
    stytch.oauth.authenticate(token, {
      session_duration_minutes: 60,
    });
  }, [stytch, token]);

  return (
    <View>
      <Text>Authenticating...</Text>
    </View>
  );
};
// end AuthenticateScreen.tsx

Thanks

2

Hey Nathan – thanks for posting!

I believe the issue here is with your redirectUrl value. I see that it’s currently myappscheme//Authenticate, which doesn’t appear to be a correctly-formatted app scheme. Did you mean to use myappscheme://Authenticate instead?

So sorry about the confusing error message – it should really be invalid_login_redirect_url. We currently use the same error for issues with both OAuth and Magic Link redirect URLs, and I’ll flag this with our team as something we should improve.

Please let me know if you have any questions about this!

3

Hi Nicole - yeah that was it! My bad. Thanks.

4

No worries at all, happy to help if anything else comes up!

1 Like