React application get Auth0 session from cookie

[notronwest]

We are hosting a React application in S3 via a Cloudfront distribution. The Cloudfront distribution uses a Lambda@Edge script to forward unauthenticated users to Auth0.

Once authenticated, they are redirected to the React application.

The Cloudfront distribution and React application live in the same subdomain and thus we have access to the JWT (currently being set in a cookie).

We would like to ‘automatically’ hydrate the session in the React app and have tried code similar to the following:

// component  ...

const { loginWithRedirect, isAuthenticated } = useAuth0();

  useEffect(() => {
    if (!isAuthenticated) {
      loginWithRedirect();
    }
  }, [isAuthenticated, loginWithRedirect]);

// component ...

And it seems to work – however once the loginWithRedirect() method finishes – the application continually refreshes – as if isAuthenticated is never set.

Any thoughts?

[marcelina.barycka]

Hey there,

Correct me if I misunderstood you, but what you would like to achieve here is to make use of created by Auth0 server session cookie which is stored later in the end user browser.

Also, if you reference to a Single Page Application (residing entirely in a browser and utilising the Authorisation Code Flow) you may encounter an expected, related to security technologies like ITP, limitations - some browsers will reject to store cookies considered as third-party (in case of SPAs, auth0 cookies are considered as third-party cookies).

For the seamless access to resources it’s recommended that browser-based flows must use Refresh Token Rotation, which provides a secure method for using refresh tokens in SPAs.

If you meant something else or have additional questions, please let me know! And have a good day!