User Sign-in without Organization creates infinite redirect loop

Get Help
,
1

Hi everybody,

I am making this since I’ve seen other posts with the same issues but no solutions have been provided and wanted to post my findings.

The problem I’m seeing is that if a user exists in Auth0 but is not a member of an org when it’s required, the application falls into an infinite redirect loop returning the callback url with an error search param but no Auth0 error is sent using the Auth0 hooks:

https://......com/?
error=invalid_request
&error_description=client%20requires%20organization%20membership%2C%20but%20user%20does%20not%20belong%20to%20any%20organization

I have a React SPA that uses React Router with Auth0ProviderWithNavigate and uses the <Auth0Provider /> wrapper for handing my authentications checks and then exporting the root component using withAuthenticationRequired

export const Auth0ProviderWithNavigate = () => {
  return (
    <Auth0Provider {...props}>
      <Outlet /> 
    </Auth0Provider>
  )
}

export default withAuthenticationRequired(root, {
  onRedirecting: () => (<>Redirecting to Login Page...</>)
});

The workflow that is happening is:

  1. User logs in successfully with universal sign in
    a. Has an account but doesn’t have an org
  2. Redirects them to redirect_uri: foobar from the <Auth0Provier/>
  3. isAuthenticated Auth0 Hooks returns false here
  4. withAuthenticationRequired fires and sends the call back to redirect to login page
  5. Login is successful again because they have an account and then rinse and repeat

I will post my solution to overriding this in the thread

2

In order break this loop I need to check for the error in the search params when the page loads and render a different component when they exists

import { useSearchParams } from 'react-router-dom';

export const Auth0ProviderWithNavigate = () => {

const [searchParams] = useSearchParams();

  return (
    <Auth0Provider {...props}>
      {searchParams.get('error') ?
        <ErrorPage />
        : <Outlet />}
    </Auth0Provider>
  )
}

It’s an easy enough fix to check on the client side but the auth0 hooks do not return an error to check for, only the search params.

import { useAuth0 } from '@auth0/auth0-react';

const { error, isAuthenticated } = useAuth0();

console.log(error);           // => false
console.log(isAuthenticated); //=> false

Is there a better way that I could check for this on the front end?

I think ideally the universal log in from Auth0 should not allow a user to continue without an organization after a successful log in.

Question for the Auth0 team, is there a better way to handle this or a way to limit users from being able to access an application without being an org when it’s required?

4

Hi @ncrobin,

Welcome to the Auth0 Community!

Thank you for providing your workaround. Please allow me sometime to review this, and I will get back to you as soon as I can!

Thanks,

Mary Beth

5

Hi @ncrobin,

Could you kindly review this article?

Thanks,

Mary Beth

6

Hi @marybeth.hunter

This article did not address the issue I am having.

I have my connections set, the problem is that Auth0 Is still treating the user as non authenticated even though they are logging in correctly. The Auth0 SDK I am using in React is treating is return isAuthenticated === false and isError == false so the withAuthenticationRequired Is triggering a call back which checks the authentication which has come back as authenticated because the user is sign-in.

This appears to be a UX issue that needs to be improved

7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.