[BUG] Refine app created with CLI infinitely loads but goes to the login path and back to home path and login path then home path etc...

[jackprogramsjp]

Describe the bug

When I run pnpm dev, and I go to the localhost, it just keeps spamming /login and then / and then /login etc. Check the gyazo gif.

https://gyazo.com/ddf4cef3fa74d7d1665795d438f33fdd

Steps To Reproduce

1. Just create a refine app with the CLI npm create-refine-app
2. I used headless and Appwrite

Expected behavior

It should not be infinitely loading.

Packages

"@refinedev/cli": "^2.16.21",
"@refinedev/core": "^4.47.1",
"@refinedev/devtools": "^1.1.32",
"@refinedev/nextjs-router": "^6.0.0",
"@refinedev/kbar": "^1.3.6",
"next": "14.1.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"@refinedev/appwrite": "^6.4.6",
"uuid": "^9.0.0",
"js-cookie": "^3.0.5",
"@refinedev/react-hook-form": "^4.8.14",
"@refinedev/react-table": "^5.6.6",
"@tanstack/react-table": "^8.2.6"

Additional Context

No response

[alicanerdurmaz]

Hello @jackprogramsjp, I created a new project and it seems to be no issue.

Can you please provide us your authProvider and route implementations? If it's possible, the full project would be awesome for deep-dive debugging.

Also which browser are u using? you can use pnpm run refine whoami to see your browser version.

[mschinis]

I have the same issue, using the next.js / supabase scaffold. I usually notice this functionality about one hour after I close the tab and come back to the project.

I realize my issue is slightly different to the original issue because I'm using Supabase, but I believe it stems from the same bug.

From debugging it looks like the reason is because

1. The default auth-provider.server.ts is checking if the user is authenticated, from the cookie, which returns true, tries to load the resource/page.
2. The default auth-provider.ts is checking if the user is authenticated with supabase js client, which returns an empty user object, and redirects to /login.

@alicanerdurmaz I can invite you to the project that you can use to debug if that helps?

[mschinis]

@alicanerdurmaz Changing the auth-provider.server.ts to the following, seems to fix the issue, but there's probably a better way to fix this issue using the supabase js sdk. I commented the additions which fix the issue with ADDED

import { AuthBindings } from "@refinedev/core";
import { cookies } from "next/headers";

// ADDED
function decodeJWTPayload (token: string) {
  return JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString());
}

export const authProviderServer: Pick<AuthBindings, "check"> = {
  check: async () => {
    const cookieStore = cookies();
    const auth = cookieStore.get("token");

    // ADDED
    let expiryTimestamp = auth?.value ? decodeJWTPayload(auth.value).exp * 1000 : Infinity
    let isStoredTokenValid = Date.now() - expiryTimestamp <= 0

    if (auth && isStoredTokenValid) {
      return {
        authenticated: true,
      };
    }

    return {
      authenticated: false,
      logout: true,
      redirectTo: "/login",
    };
  },
};

[alicanerdurmaz]

@mschinis I could reproduce the bug, thanks for the solutions. Your solution seems valid but I want to investigate more. I believe Supabase's SDK has more viable solutions https://supabase.com/docs/guides/auth/server-side/creating-a-client

I will keep you informed.

[alicanerdurmaz]

Hello again @mschinis and @jackprogramsjp

I fixed the supabase auth provider and we will release the fix for create refine-app as soon as possible, but you can fix your project while waiting for the release.

You can find the finished project here

keypoints:

• we need to create authProviderServer with "@supabase/ssr" package.
• Supabase middleware to handle all cookie processes and refreshing the Auth token.
• Also I did a couple of fixes on authProviderClient
• I have created supabase client from "@supabase/ssr" package.
• Also I made changes on authProvider. You can copy and paste your project to see DIFF in git.

Please feel free to let me know if you find any issues or if you have any suggestions for improvements to the code.

[mschinis]

Hi @alicanerdurmaz , thanks for the quick turnaround. I've implemented your changes in my project and I'll get back to you, once I do a thorough testing.

In general, your approach make sense. Couple of quick comments:

1. There's a small typo contants.ts instead of constants.ts
2. Here, the supabaseBrowserClient.auth.setSession method returns a promise, but there's no await, was this a conscious decision?

[mschinis]

I can confirm that your changes solve my issue, thank you @alicanerdurmaz

[alicanerdurmaz]

Hi @alicanerdurmaz , thanks for the quick turnaround. I've implemented your changes in my project and I'll get back to you, once I do a thorough testing.

In general, your approach make sense. Couple of quick comments:

1. There's a small typo contants.ts instead of constants.ts
2. Here, the supabaseBrowserClient.auth.setSession method returns a promise, but there's no await, was this a conscious decision?

Thanks! @mschinis. You are right, we need to await the supabaseBrowserClient.auth.setSession.

[alicanerdurmaz]

Hello again @jackprogramsjp, we released a fix for appwrite. You can see changed files here.

If you have any questions please feel free to ask.