Wasp•2y ago

Preserving Query Parameters in Google Social Auth Redirects

I'm currently integrating Google Social Auth into our application. In certain instances, our login URLs contain query parameters. After users successfully authenticate through Google, we need to ensure that any query parameters from the original URL persist in the redirect URL.

For instance, if a user clicks on the following link without an active login session:

https://my-application/chat?message=hello

https://my-application/chat?message=hello

https://my-application/chat?message=hello

https://my-application/chat?message=hello

The user is redirected to Google auth. Upon successful authentication, they're redirected back to:

https://my-application/chat

https://my-application/chat

https://my-application/chat

https://my-application/chat (because of

onAuthSucceededRedirectTo: "/chat"

onAuthSucceededRedirectTo: "/chat"

onAuthSucceededRedirectTo: "/chat"

onAuthSucceededRedirectTo: "/chat" in the

main.wasp

main.wasp

)

However, i would it to redirected back to:

https://my-application/chat?message=hello

https://my-application/chat?message=hello

https://my-application/chat?message=hello

https://my-application/chat?message=hello

How can we configure this behaviour in WASP?

matijash•2/15/24, 12:44 PM

@miho could you check this one out pls?

miho•2/15/24, 1:00 PM

I don't think we expose a way to propagate the query params via backend all the way to the /chat/chat page unfortunately.

One thing you could do is use the

localStorage

localStorage

When people land on the login page, save the query params in the
```
localStorage
```
```
localStorage
```
After the login is completed, on the /chat/chat page you retrieve the data from the
```
localStorage
```
```
localStorage
```

To make things a bit more secure, make sure to delete the data from

localStorage

localStorage

after you read them from on the /chat/chat page.

In the future:
In the future, we'll probably want to enable users to achieve the same thing via propagating the query params through the chain of redirects:

LoginPageLoginPage -> our backendour backend -> Google backendGoogle backend -> our clientour client -> our backend againour backend again -> redirect on success pageredirect on success page

We'll rework the OAuth in the near future (we'll start using Artic from the Lucia auth lib family) and then we can improve on this. I can't give an ETA for this, but this year, sometime

martinsos•2/15/24, 5:09 PM

Some time ago when I was building some apps, I often wanted this same feature. Actually, what I wanted was for login to preserve the original URL (with query and all). So if user wanted to visit URL X, but was redirected to login, I would love them to come back to X, whatever the X was.
This is something we could support I think, a lot of apps could use that as a good default!

martinsos•2/15/24, 5:20 PM

I created an issue for this, it is a nice idea: https://github.com/wasp-lang/wasp/issues/1772 .

GitHub

Support redirecting user to their initial URL after successful logi...

Would be great if login could preserve the original URL (with query params and all). So if user wanted to visit URL X, but was redirected to do login, I would love them to be redirected to X after ...

HarishOP•2/16/24, 6:07 AM

Hi @miho :

Thank you for your suggestion. However, there's a challenge with implementing it. When users land on the chat page (without an active login session) with query parameters (e.g., "https://my-application/chat?message=hello"), they're immediately redirected to "https://my-application/login", resulting in the loss of query parameters before we can save them to localStorage.

I tried to save the query params before the redirection to /login route but it didn't work out.

Do you have any alternative suggestions for preserving query parameters during the redirect process? Is there any other workaround I could use until this issue is fixed?

miho•2/16/24, 8:38 AM

One thing you could do is: not use authRequired: trueauthRequired: true in the Wasp file, but instead use the useAuthuseAuth hook which would give you the ability to:

Check if the user is logged in when the page loads, if yes, then let them through
If not, first save some params and then redirect using the <Redirect /><Redirect /> from react-router-domreact-router-dom lib

We have an example for using useAuthuseAuth

RedirectRedirect here: https://wasp-lang.dev/docs/auth/social-auth/overview#3-showing-the-correct-state-on-the-client

Overview | Wasp

Social login options (e.g., Log in with Google) are a great (maybe even the best) solution for handling user accounts.

HarishOP•2/16/24, 12:40 PM

Thanks

Preserving Query Parameters in Google Social Auth Redirects

Similar Threads

Similar Threads

Similar Threads