How to retrieve the referrer URL in an Auth0 Post Login Action?

[b.neugebauer]

Hi, I’m looking to create a post-login action that depends on the URL the user originally visited.

I’m securing a Google AppSheet URL with Auth0, and here’s my use case:

1. User navigates to https://www.appsheet.com/start/123
2. The Auth0 login form appears
3. User logs in
4. The onExecutePostLogin action is triggered

I’d like to access the original referrer URL (https://www.appsheet.com/start/123) within the onExecutePostLogin function. However, event.transaction.redirect_uri only shows https://www.appsheet.com/Account/ELC, not the initial URL.

How can I retrieve the original URL that prompted the Auth0 login screen?

Best,
Benny

[marybeth.hunter]

Hi @b.neugebauer,

There is not an out-of-the-box way to access the URL the user originally visited in an Action. I did a bit of testing and was able to access the URL in this (somewhat hacky) way:

In my React app, I am initializing Auth0 with the acr_values set to window.location.origin. Example:

const providerConfig = {
  domain: config.domain,
  clientId: config.clientId,
  cacheLocation: 'localstorage',
  authorizationParams: {
    redirect_uri: config.callbackURL,
    acr_values: `${window.location.origin}`
  },
};

In my Action, I can access event.transaction.acr_values and see an array with the initial window.location.origin URL. This is the result of console.logging the event object in my action:

Note that the above code is an example and should be tested in a development environment first before adding to production. Additionally, this may vary depending on the SDK you are using. I just used our React SDK as an example.

Please let me know if you have any additional questions or if you run into any issues!

Best,

Mary Beth

[b.neugebauer]

Hi Mary, thanks for testing!

Unfortunately, the website displaying the login page isn’t under my control, so I can’t add an authorization parameter to it.

I’ve configured my AppSheet Access using OpenID Connect.

When I visit https://www.appsheet.com/start/123, it redirects to Login - AppSheet, featuring an OpenID Connect button linked to the Auth endpoint of my Auth0 application. Although the Login - AppSheet page includes a “returnUrl” parameter with the original address, this parameter isn’t forwarded to Auth0.

I’m exploring now alternative methods to secure my AppSheet app using Auth0. Do you have any suggestions? I’ve come across middleware like this: GitHub - auth0/express-openid-connect: An Express.js middleware to protect OpenID Connect web applications.

Best,
Benny

[marybeth.hunter]

Hi @b.neugebauer,

I did some research on this and this is what I found that I think could be helpful. I’m using Next.js as an example here:

1. Modify the /authorize URL to Include the returnUrl

You need to pass this returnUrl parameter to Auth0 by including it in the authorization request. Typically, you can do this by modifying the authorizationParams when initiating the login request through your API (e.g., the login endpoint in Next.js).

For example, if you’re using the @auth0/nextjs-auth0 SDK, you can forward this parameter like so:

import { handleLogin } from '@auth0/nextjs-auth0';

export default function login(req, res) {
  const returnUrl = req.query.returnUrl || '/'; // Use the returnUrl if available

  handleLogin(req, res, {
    authorizationParams: {
      redirect_uri: process.env.AUTH0_REDIRECT_URI,
      // Pass the returnUrl to Auth0 as a query parameter
      returnTo: returnUrl,
    },
  });
}

2. Use returnTo Parameter on Auth0

Auth0 supports a returnTo parameter that you can pass during the authentication process. This tells Auth0 where to redirect the user after the authentication process is complete.

• In the handleLogin function, you pass returnTo as part of the authorizationParams.
• When the user is redirected back after logging in, Auth0 will forward the user to that URL, preserving the original destination (the AppSheet URL in this case).

3. Callback Handling to Capture the Redirect URL

In the callback handler (where Auth0 sends the user back after authentication), ensure that you process the returnTo query parameter properly:

import { handleCallback } from '@auth0/nextjs-auth0';

export default async function callback(req, res) {
  try {
    // Handles the callback and stores the session
    await handleCallback(req, res);

    // After successful login, redirect the user to the `returnTo` URL
    const { returnTo } = req.query; // Capture the returnTo URL from the query string
    res.redirect(returnTo || '/'); // Fallback to '/' if returnTo is not present
  } catch (error) {
    console.error(error);
    res.status(error.status || 500).end(error.message);
  }
}

4. Ensure Your Auth0 Settings are Correct

Make sure your Auth0 application settings allow the returnTo URL in your Allowed Callback URLs:

• Go to your Auth0 dashboard
• Navigate to Applications > Your Application > Settings.
• Update the Allowed Callback URLs to include the return URL (e.g., https://your-app.com/callback), and make sure it aligns with the one that AppSheet sends.

Please let me know how that goes!

Thanks,

Mary Beth