Modification to Auth0Provider in react-auth0-spa.js

react-auth0-spa.js

import React, { useState, useEffect, useContext } from 'react'
import createAuth0Client from '@auth0/auth0-spa-js'

const DEFAULT_REDIRECT_CALLBACK = () =>
  window.history.replaceState({}, document.title, window.location.pathname)

export const Auth0Context = React.createContext()
export const useAuth0 = () => useContext(Auth0Context)

let _initOptions

const getAuth0Client = () => {
  return new Promise(async (resolve, reject) => {
    let client
    if (!client)  {
      try {
        client = await createAuth0Client(_initOptions)
        resolve(client)
      } catch (e) {
        reject(new Error('getAuth0Client Error', e))
      }
    }
  })
}

export const getTokenSilently = async (...p) => {
  const client = await getAuth0Client()
  return await client.getTokenSilently(...p)
}
export const Auth0Provider = ({
  children,
  onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
  ...initOptions
}) => {
  const [isAuthenticated, setIsAuthenticated] = useState()
  const [user, setUser] = useState()
  const [auth0Client, setAuth0] = useState()
  const [loading, setLoading] = useState(true)
  const [popupOpen, setPopupOpen] = useState(false)

  useEffect(() => {
    const initAuth0 = async () => {
      _initOptions = initOptions
      const client = await getAuth0Client(initOptions)
      setAuth0(client)
      if (window.location.search.includes('code=')) {
        const {
          appState
        } = await client.handleRedirectCallback()
        onRedirectCallback(appState)
      }
      const isAuthenticated = await client.isAuthenticated()
      setIsAuthenticated(isAuthenticated)

      if (isAuthenticated) {
        const user = await client.getUser()
        setUser(user)
      }

      setLoading(false)
    }
    initAuth0()
    // eslint-disable-next-line
  }, [])

  const loginWithPopup = async (params = {}) => {
    setPopupOpen(true)
    try {
      await auth0Client.loginWithPopup(params)
    } catch (error) {
      console.error(error)
    } finally {
      setPopupOpen(false)
    }
    const user = await auth0Client.getUser()
    setUser(user)
    setIsAuthenticated(true)
  }

  const handleRedirectCallback = async () => {
    setLoading(true)
    await auth0Client.handleRedirectCallback()
    const user = await auth0Client.getUser()
    setLoading(false)
    setIsAuthenticated(true)
    setUser(user)
  }
  return (
    <Auth0Context.Provider
      value={{
        isAuthenticated,
        user,
        loading,
        popupOpen,
        loginWithPopup,
        handleRedirectCallback,
        getIdTokenClaims: (...p) => auth0Client.getIdTokenClaims(...p),
        loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),
        getTokenWithPopup: (...p) => auth0Client.getTokenWithPopup(...p),
        logout: (...p) => auth0Client.logout(...p)
      }}
    >
      {children}
    </Auth0Context.Provider>
  )
}

@artem-alek Did you find a solution. Facing a similar question.

I've been having this same issue. I manually initialized _initoptions with the props that I was passing to Auth0Provider, and it seems to have resolved the issue.

@stevehobbsdev @klequis is this resolved? I feel like being able to call the React-SDK from an action is basic when you have a MERN stack. Surprised this is not available through the SDK yet as I also face the Hooks error when trying.

Same issue/question here. Wondering if there's a good solution to this?

Edit: here's the code based on the above discussions that (so far) seems to work. Would be nice to see a fully Auth0 supported version though.

// Note: this code extends '@auth0/auth0-react.js' which is built 
// on '@auth0/auth0-spa-js' which exports 'createAuth0Client'.
import createAuth0Client from '@auth0/auth0-spa-js'

let _initOptions = {
  domain: AUTH_DOMAIN,
  client_id: AUTH_WEB_APP_CLIENT_ID,
}
let _client

const getAuth0Client = () => {
  return new Promise(async (resolve, reject) => {
    let client
    if (!client) {
      try {
        client = await createAuth0Client(_initOptions)
        resolve(client)
      } catch (e) {
        reject(new Error('getAuth0Client Error', e))
      }
    }
  })
}

export const getApiToken = async (...p) => {
  if (!_client) {
    _client = await getAuth0Client()
  }
  return await _client.getTokenSilently(...p)
}

@Gra55h0pper Auth0 has Updated SDK now. https://github.com/auth0/auth0-react

@iamchathu, yes, auth0-react is the SDK I'm using.
If you look at the auth0-react sources you can see it calls auth0-spa-js (which exports createAuth0Client) under the hood.

Most importantly though, auth0-react (still) doesn't support getTokenSilently outside of a component (i.e. without the need for using a React Hook), does it?

@Gra55h0pper

Are you using your snippet to just create an extra client that getApiToken uses and you use this in addition to auth0-react?

@fieldju, yes, at this point in time I'm wrapping the App in auth0-react's Auth0Provider for general user-login besides using the snippet for getting API-tokens. I'm assuming that indeed means two clients are being created. Though I haven't seen any issues with that, I think it would be nice if Auth0 would provide a clean solution.

Update: I do not understand why, but I found my snippet above does not work for Safari where it works fine for Chrome (???).
Also, I learned Auth0 recommends against storing the access-token in local storage (Redux in my case). See: https://auth0.com/blog/complete-guide-to-react-user-authentication/#Calling-an-API. I guess this may explain why they don't support getting a token outside of a component?
Anyway, I'm changing the architecture of my App getting the getAccessTokenSilently function from the useAuth0 hook in every UI component that needs to call the API and then passing it explicitly to the redux-thunk action that's calling the API-endpoint. It seems much more verbose than necessary, but it works.

@Gra55h0pper This is how I am solving this for my project.

A PR with usage examples: SimplQ/simplQ-frontend#483

@daltonfury42 Thanks much. I'll take a look. It will unclutter my code.
SimplQ looks cool! I think there's definitely space for an App like that!

For anyone reaching this gist looking for a solution for @auth0/auth0-react
I have a working approach here https://stackoverflow.com/a/68407340/6469059

@nelsonfncosta Thank you so much, this is absolutely what I wanted and after so much time struggling and dropping my projects because of this, I can finally say this is what I wanted to begin with. +1 sir.

Would love any insight from others, if this solution is robust and can it have any pitfalls?