The Complete Guide to React Authentication with Auth0

Blog Discussions
140

Thanks @dan-auth0 ! Will try to get to this when work is a hint less hectic and will report back. Appreciate the effort and sharing of this.

Some initial thoughts/comments:
*Looks like we are all typescript now so I do need to convert some items in my project to test out.
*In regards to protect route, at I glanced and nothing stood out here as new logic wise.
*From a general feedback perspective on the guide itself, as the original used non typescript, you may need to include a note or generic blurb in there just acknowledging this fact (just a nod to folks that went through your original and built something)

—Edit @dan-auth0 – I lied. Got curious and tested via a quicker route than trying on the main project I have–

I cloned out your project and modified message-services.tsx to call my API I have running:

export const getProtectedResource = async (
  accessToken: string
): Promise<ApiResponse> => {
  const config: AxiosRequestConfig = {
    url: `${apiServerUrl}teleporters`,
    method: "GET",
    headers: {
      "content-type": "application/json",
      Authorization: `Bearer ${accessToken}`,
    },
  };

And go to the protected page after login.

Check out my console from FastAPI:

INFO:     Started server process [9092]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     127.0.0.1:60485 - "OPTIONS /api/teleporters HTTP/1.1" 200 OK
INFO:     127.0.0.1:60485 - "OPTIONS /api/teleporters HTTP/1.1" 200 OK
INFO:     127.0.0.1:60486 - "GET /api/teleporters HTTP/1.1" 200 OK
INFO:     127.0.0.1:60485 - "GET /api/teleporters HTTP/1.1" 200 OK

Output from developer console:

react-dom.development.js:67 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at ProtectedPage (http://localhost:3000/static/js/bundle.js:3006:80)
    at WithAuthenticationRequired (http://localhost:3000/static/js/bundle.js:8611:14)

This points to the issue I believe that I had identified previously on withAuthenticationRequired code being flawed/bugged with router6 causing the double mount (useEffect triggering twice – component mounts,unmounts,remounts). This type of behavior did not occur with the old router + withAuthenticationRequired.

Entirely possible my sleep deprivation is talking though and I am way off :-3.

1 Like