conscious-sapphire•15mo ago

Persistent 'Loading...' Screen in Refine App—Requires Multiple Refreshes for Switching Between Pages

Hey everyone, we're facing a peculiar issue with our web app, which is built on Refine and integrated with Auth0 for authentication. We've observed that switching between our app's various pages—or even just upon landing on the main page—often triggers a persistent "Loading..." screen. In some cases, we get a completely blank, empty page instead. To make matters worse, it often takes two refreshes to get past these roadblocks and reach the login screen. Has anyone experienced similar issues with Refine, particularly when integrated with Auth0? Is this a known quirk of the Refine framework, or could this be an issue specific to our implementation? Any insights or fixes you could share would be immensely helpful. Thanks in advance!

6 Replies

kapa.ai•15mo ago

Hi @amrutha. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it's not clear if this is a known issue with Refine or Auth0. However, there's a possibility that the issue might be related to the way your authentication is set up. In Refine, the authentication process is handled by the auth provider. If the auth provider is still loading or checking the authentication status, it might cause a persistent "Loading..." screen or even a blank page. Here's an example of how an auth provider is set up in Refine with Auth0:

const App = () => {  
 const { isLoading, isAuthenticated, user, logout, getIdTokenClaims } = useAuth0();  
  
 if (isLoading) {  
 return <span>loading...</span>;  
 }  
  
 const authProvider: AuthBindings = {  
 login: async () => {  
 return {  
 success: true,  
 };  
 },  
 logout: async () => {  
 logout({ returnTo: window.location.origin });  
 return {  
 success: true,  
 };  
 },  
 onError: async (error) => {  
 console.error(error);  
 return { error };  
 },  
 check: async () => {  
 try {  
 const token = await getIdTokenClaims();  
 if (token) {  
 axios.defaults.headers.common = {  
 Authorization: `Bearer ${token.__raw}`,  
 };  
 return {  
 authenticated: true,  
 };  
 } else {  
 return {  
 authenticated: false,  
 error: {  
 message: "Check failed",  
 name: "Token not found",  
 },  
 redirectTo: "/login",  
 logout: true,  
 };  
 }  
 } catch (error: any) {  
 return {  
 authenticated: false,  
 error: new Error(error),  
 redirectTo: "/login",  
 logout: true,  
 };  
 }  
  
 return {  
 authenticated: false,  
 error: {  
 message: "Check failed",  
 name: "Token not found",  
 },

const App = () => {  
 const { isLoading, isAuthenticated, user, logout, getIdTokenClaims } = useAuth0();  
  
 if (isLoading) {  
 return <span>loading...</span>;  
 }  
  
 const authProvider: AuthBindings = {  
 login: async () => {  
 return {  
 success: true,  
 };  
 },  
 logout: async () => {  
 logout({ returnTo: window.location.origin });  
 return {  
 success: true,  
 };  
 },  
 onError: async (error) => {  
 console.error(error);  
 return { error };  
 },  
 check: async () => {  
 try {  
 const token = await getIdTokenClaims();  
 if (token) {  
 axios.defaults.headers.common = {  
 Authorization: `Bearer ${token.__raw}`,  
 };  
 return {  
 authenticated: true,  
 };  
 } else {  
 return {  
 authenticated: false,  
 error: {  
 message: "Check failed",  
 name: "Token not found",  
 },  
 redirectTo: "/login",  
 logout: true,  
 };  
 }  
 } catch (error: any) {  
 return {  
 authenticated: false,  
 error: new Error(error),  
 redirectTo: "/login",  
 logout: true,  
 };  
 }  
  
 return {  
 authenticated: false,  
 error: {  
 message: "Check failed",  
 name: "Token not found",  
 },

(Source: refine.dev docs (https://refine.dev/docs/advanced-tutorials/auth/auth0/)) In this example, if the isLoading state from useAuth0() is true, it will return a loading screen. If there's an error during the check method, it will redirect to the login page. You might want to check your auth provider setup and ensure that it's correctly implemented. If the issue persists, it might be a good idea to reach out to the Refine or Auth0 support for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

<@1076001195174400050> kapa.ai is still learning and improving, please let us know how it did by reacting below

sunny-green•15mo ago

Hey @amrutha, which routing library do you use? Did you tried investigating to see if its related with the inital auth0 load or with navigations/routing? Do you still get multiple flashes of loading if you try to open /login directly?

graceful-blue•15mo ago

Just a stab in the dark here, but this looks a lot like a default redirect for not-logged-in users where you are redirecting to https://<yourdomain>/login which is causing the page to reload. Logs / Network tab would be useful here 🙂

conscious-sapphireOP•15mo ago

Is this Auth0 configuration causing the problem?

sunny-green•15mo ago

Any chance to provide a minimal repro? When you try our Auth0 example using your credentials/tokens, do you have the same issue? Check out the example here https://github.com/refinedev/refine/tree/next/examples/auth-auth0 Also can you check the message i've sent yesterday? 🙏

Persistent 'Loading...' Screen in Refine App—Requires Multiple Refreshes for Switching Between Pages

Did you find this page helpful?