Redirecting Users in PropelAuth

PropelAuth provides configurable UIs for login, signup, and org management. We host these for you so you can start testing them, even before you’ve written any code.

One question we often get, however, is how can I redirect my user back to the right place after they login?

Default Redirect Location

In the PropelAuth Dashboard, you can specify the default redirect location from the Frontend Integration section.

In this case, after the user logs in or logs out of the test environment, they will be redirected to http://localhost:8000

Overriding the Defaults

While you can rely on the defaults set in your dashboard, what if you have custom locations you would like to send your users to? Well, using our frontend libraries, you can do just that.

When you are sending the user to the login/signup pages, you have the option to specify where they will come back to after they complete that action. For example, let’s say I have users clicking a Login button at the domain example.com, but after a successful login, I want to direct them to example.com/onboarding.

All it would take would be to make sure that in my redirect function on the frontend, I pass that URL as the postLoginRedirectUrl.

redirectToLoginPage({
	postLoginRedirectUrl: '<https://example.com/account>'
})

Now I could have done this by changing the default redirect location to “/account” in my dashboard. But this method works for programatic redirects as well. Let’s say I have a contextual instance_id that I need to pass into the URL. To do this, I would need to do it pass in

redirectToLoginPage({
	postLoginRedirectUrl: `https://example.com/${instance_id}`
})

Redirect to the Current Page

What if you wanted to redirect the user back to their current page in your app after they login? In that case, you could use the same method as before, but this time we would pass in a window reference as the URL.

redirectToLoginPage({
	postLoginRedirectUrl: window.location.href
})

In this case, a user would be redirected back to whatever page they were on when they initially clicked to login to the application.

We can even do this automatically across your whole application, like in following example, where we passed in a RedirectToLogin component to the RequiredAuthProvider.

<RequiredAuthProvider
  authUrl={process.env.NEXT_PUBLIC_AUTH_URL || ""}
  displayIfLoggedOut={
    <RedirectToLogin
      postLoginRedirectUrl={window.location.href}
    />
  }
>
  {children}
</RequiredAuthProvider>

Redirect to a Preview Deployment

In some cases, you may want to redirect to a preview deployment of the application. Some platforms, like Netlify, Vercel, and Render have support for preview deployments, but how would you make sure you come back to the right place after logging in?

To accomplish this, first you’ll need to add an additional frontend location to the frontend integration section of your dashboard.

Once added, you can then use the above examples with window.location.href and it will automatically redirect back to the preview deployment instead of your default.

Hopefully this is a helpful overview of the various ways you can make sure your user is getting to the right place. If you have any more questions, feel free to reach out to us at support@propelauth.com