Troubleshooting Tips

Sometimes things don't go as planned. Whether you're encountering error messages, unexpected behavior, or simply can't get something to work the way you want, don't worry! This guide is here to help. As always, please reach out to support@propelauth.com if you need support.

Infinite Redirects When Logging In

Do you get stuck in an infinite loop during log in with some browsers? This could be because the browser you're using has Prevent Cross-Site Tracking or Block third-party cookies enabled. Common examples of this are Safari and Chrome Incognito mode.

This happens when your auth domain (https://yourdomain.propelauthtest.com) is different than your app domain (http://localhost:3000). When you deploy your app to production or staging your auth page and app will share the same domain, so there's no need to worry. This should only happen while in your testing environment.

If this is bothering you while in your testing environment we recommend either disabling the Prevent Cross-Site Tracking or Block third-party cookies settings, using a different browser, or deploying a staging environment.

Random Logouts, 401 Errors, or Invalid JWT

Are you experiencing seemingly random logout redirects, 401 or invalid JWT errors? This could be because of how Javascript captures variables, such as your users access tokens.

Take this code snippet, for example:

import useSWR from "swr";
import { useAuthInfo } from "@propelauth/react";

export default function usePropelSWR(url) {
  const authInfo = useAuthInfo();

  const fetcher = async (url) => {
    return fetch(url, {
      headers: {
        Authorization: `Bearer ${authInfo.accessToken}`,
      },
    }).then((res) => res.json());
  }

  return useSWR(url, fetcher, {
    keepPreviousData: true,
    onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
      if (error.status === 404) return;
      if (retryCount >= 3) return;
    },
  });
}

While the accessToken is going to be refreshed automatically by PropelAuth, Javascript will cache the first accessToken after render and will reuse it until the component is rendered again.

To fix this, we can use React's useRef and useEffect hooks to reference the accessToken value and keep it up to date. This will ensure that the most recent version of the accessToken is used, resulting in no more expired tokens!

import useSWR from "swr";
import { useAuthInfo } from "@propelauth/react";
import { useRef, useEffect } from "react";

export default function usePropelSWR(url) {
  const authInfo = useAuthInfo();
  const authInfoRef = useRef(authInfo);

  useEffect(() => {
      authInfoRef.current = authInfo;
  }, [authInfo]);

  const fetcher = async (url) => {
    return fetch(url, {
      headers: {
        Authorization: `Bearer ${authInfoRef.current.accessToken}`,
      },
    }).then((res) => res.json());
  }

  return useSWR(url, fetcher, {
    keepPreviousData: true,
    onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
      if (error.status === 404) return;
      if (retryCount >= 3) return;
    },
  });
}

CORS errors

CORS errors occur when attempting to make a request from one domain to another, such as http://localhost:3000 and http://localhost:3001.

If using React, a simple way to fix this issue is to add the following to your package.json:

"proxy": "http://127.0.0.1:3001/"

This will automatically proxy certain requests (like JSON requests) to http://localhost:3001. For more information, see the official React docs.

Another possible cause of CORS errors are when the Frontend Integrations page in your PropelAuth dashboard is not configured correctly.

For example, let's say your application is located at http://localhost:3000 but your frontend Frontend Integrations page looks like so:

Since the Application URL is pointed to a different domain than your app you're likely to run into a CORS error.