Sometimes when working with Graphweaver’s Auth framework you’ll experience login loops in the Admin UI or your own client code. This guide breaks down what can cause these, how to track down the cause and common fixes. We’ll focus on the Admin UI in this guide as we can talk in specific terms about it, but if you’re seeing this kind of behaviour in your own frontend, you should be able to apply the same concepts to your own code to fix it.

Observed Behaviour

When logging in, you’ll see the following:

1. Visit the Admin UI.
2. Login page renders and discovers you’re not logged in.
3. Because you use an external auth provider (like Auth0), the Admin UI redirects you to to that auth provider to go log in.
4. You log in successfully, so the auth provider redirects you back to the admin area with a token.
5. The Admin UI does not receive / store / understand / validate the token, so it sees you as not logged in. Go to step 2.

Components Involved in this Behaviour

To get the the root cause it can be helpful to understand the actual components involved.

• Admin UI
  • Renders the login page
  • Reacts to X-Auth-Redirect headers sent by the server by redirecting the browser
  • Stores token in local storage
  • Appends tokens to requests sent to the server
  • If using an external auth provider like Auth0: Receives token on return from the auth provider and writes it to local storage
  • If using a built in auth provider like password: Overwrites token in local storage if the server sends a new one
• Backend
  • Validates tokens on each request
  • Enforces ACLs
  • Sends X-Auth-Redirect header when the client needs to go to a specific URL to authenticate for step up auth
  • If a token was sent in the request that is invalid, then send X-Auth-Redirect back to the client to go get a new one.
  • If using a built in auth provider like password: Validates login mutations, returns token in Authorization header in response so the frontend will store it in local storage.
• External Auth Provider (optional:
  • Generates tokens
  • Redirects browser back to the client with the token in a query string parameter

Flow Chart

Here’s the flow: