CODEWITHSUNDEEP
http-redirectexpoquery-stringexpo-routerexpo-dev-client
Yafim Simanovsky
Yafim Simanovsky

Reputation: 636

How to correctly parse query params from a server redirect to client in RN Expo development mode

I am building a React Native app (currently trying to work with Android) using expo-router (and SupaBase, but I think that is slightly less relevant to the issue).

I created a development build in Expo, and am setting up an authentication flow where by clicking an email link, the user's device will open the app back up and is redirected to a 'reset password' screen.

The redirection happens via my Server, which contains an endpoint called for example /auth/confirm and parses correctly the data from the email link (an auth token and the user's email and so on for example by using req.query.email).

I then do:

    const address = `${next}?email=${email}&token=${token}`;
    res.redirect(303, address);

where next is my client app url at /AuthScreen and the email and auth token are included. This successfully brings me back to the app on my emulator or device, into the /AuthScreen client page, but I was only able to parse the email only..

I'm not sure why, but various methods I tried kept parsing only the first query param from the redirect. If I was redirecting from a client page to /AuthScreen, it would be simpler, but I am redirecting from a server that is why perhaps I got confused here and am not able so far to untangle the correct way to do this.

As I am new to this topic, I have been over a lot of docs for Expo, expo-router, React-Navigation, and so on.. but haven't been able to find this particular solution.

I understand that using the in built {route} in the component is a client-side functionality and wouldn't work..


I weaved my way in various docs such as:

Supabase docs Deep Linking

Expo docs Use Search Parameters (I have tried to use useLocalSearchParams and useGlobalSearchParams)

React Navigation docs Passing parameters to routes

Also, from this SO question on How to get link to redirect to expo app during development I saw the suggestion to use Linking from expo-linking but it doesn't have this module (nor does expo-router.. I think these modules are deprecated..?

Also tried Linking.getInitialURL() from react-native directly which seems to have this particular method, but still no luck getting the full redirect query string.


Would appreciate any help on this. Thanks :)

Upvotes: 0

Views: 514

Answers (1)

Ben Xiong
Ben Xiong

Reputation: 31

I resolved URL problems by passing the URL as an argument into encodeURIComponent().

const url = "https://www.google.com/";
onSubmit = () => {
    router.push({ pathname: `/(page)/${id}`, params: { link: encodeURIComponent( url ) }})
}

No need to use JSON.stringify()

So do this:

res.redirect( 303, encodeURIComponent( address ) );

Upvotes: 0

Related Questions