Auth0 iframe in unauthenticated routes

Get Help and Help Others
1

Hi, I’m wondering why an Auth0 iframe is present in routes marked as “no authentication”. This iframe is generating 400 Bad Request under the hood and make the page so slow.

This is my config (Redwood 5.2.3, node 18):

I added useAuth={useAuth} to the Router, but the Redwood Auth documentation is not clear about it (sometimes this property was added to Router but other times it was not).

/* web/src/Routes.js  */

const Routes = () => {
  return (
    <Router useAuth={useAuth}>
      // I want no auth on this page.
      <Route path="/register-device/{token}" page={RegisterDevicePage} name="registerDevice" />
      
      // Private routes.      
      <Set private unauthenticated="login" wrap={WorkspaceLayout}>    
        ...
      </Set>
    <Router />
  )

The page RegisterDevicePage just calls the mutation EnrollDevice:

/* web/src/pages/RegisterDevicePage/RegisterDevicePage.js */

...
const ENROLL_DEVICE = gql`
  mutation EnrollDevice($input: EnrollDeviceInput!) {
    enrollDevice(input: $input) {
        data   
    }
  }
...
`

This mutation is tagged with skipAuth:

/* api/src/graphql/devices.sdl.js */ 

enrollDevice(input: EnrollDeviceInput!): Device! @skipAuth
...

The problem

When I access to my page, it takes a lot of time to load and call the mutation and I see an IFrame with the Auth0 stuff:

screen1
screen11108×225 26.7 KB

Also, I see a Bad Request regarding authentication issues:

screen2
screen2899×169 52.1 KB

Why is all this happening in pages and mutations where authentication is not required? Is it possible to remove all this overkill Auth0 stuff?

2

After spending a long time, I finally found the issue:

  • I’m developing on my local environment and setup the Auth0 tenant with http://localhost:8910.
  • I found the issue when accesing 127.0.0.1 instead of localhost.
  • When accessing the non-protected page http://127.0.0.1:8910/register-device a wrong Auth0 iframe is present.
  • If I access http://localhost:8910/register-device averything works as expected (no Auth0 iframe).

Hope it helps others facing this.

1 Like
3

Well, I’m still having this issue in Chrome browser (Firefox seems to be OK). Any idea what’s going on?

The issue seems to be related to Auth0, viewing the Chrome console I found a timeout error near this function:

try {
  if (window.crossOriginIsolated)
      throw new d("login_required","The application is running in a Cross-Origin Isolated context, silently retrieving a token without refresh token is not possible.");
  const t = e.timeoutInSeconds || this.options.authorizeTimeoutInSeconds
    , n = await ((e,t,n=60)=>new Promise(((r,o)=>{
      const i = window.document.createElement("iframe");
      i.setAttribute("width", "0"),
      i.setAttribute("height", "0"),
      i.style.display = "none";
      const a = ()=>{
          window.document.body.contains(i) && (window.document.body.removeChild(i),
          window.removeEventListener("message", s, !1))
      }
      ;
      let s;
      const u = setTimeout((()=>{
          o(new h),
          a()
      }

@PantheRedEye Any idea why Redwood is using auth0-spa-js instead of the recommended lib for React auth0-react?

4

Second chance solution

After trial and error, I found a working Auth0 config with useRefreshTokens: true and useRefreshTokensFallback: false:

const auth0 = new Auth0Client({
  domain: process.env.AUTH0_DOMAIN || '',
  clientId: process.env.AUTH0_CLIENT_ID || '',
  authorizationParams: {
    redirect_uri: process.env.AUTH0_REDIRECT_URI,
    audience: process.env.AUTH0_AUDIENCE,
  },
  sessionCheckExpiryDays: 30,
  cacheLocation: 'localstorage',
 
  // These settings are important to get rid of the issue in Auth0.
  useRefreshTokens: true,            
  useRefreshTokensFallback: false,
})

Despite this, I really don’t now why authentication logic is triggered on non-authenticated endpoints. Perhaps there is a bug in RW but I’m not sure about it.

5

Thanks @fmiranda for figuring this out.

Should we update the setup command in some way to include these options by default?

Or document in the generated code to help others that see this issue?