wee-brown•2y ago

Refine/Next/Mantine/Supabase - access to register/forgot password page not allowed

While not logged in, the register/forgot password pages are not accessible. I get the unauthenticated redirect to login?to=%2Fregister. Expected behaviour, visitor should be able to register a new account while not authenticated.

"dependencies": {    "@pankod/refine-cli": "^1.13.0",    "@pankod/refine-core": "^3.90.4",    "@pankod/refine-nextjs-router": "^4.1.0",    "@pankod/refine-inferencer": "^2.0.2",    "next": "^13.0.6",    "next-compose-plugins": "^2.2.1",    "react": "^18.2.0",    "react-dom": "^18.2.0",    "@pankod/refine-supabase": "^4.1.0",    "nookies": "^2.5.2",    "@pankod/refine-mantine": "^1.2.0",    "@pankod/refine-react-table": "^4.7.2",    "@tabler/icons": "^1.39.1",    "@mantine/next": "^5.5.1",    "@emotion/react": "^11.10.4",    "@emotion/server": "^11.10.0",    "@pankod/refine-kbar": "^0.8.0"  },

"dependencies": {    "@pankod/refine-cli": "^1.13.0",    "@pankod/refine-core": "^3.90.4",    "@pankod/refine-nextjs-router": "^4.1.0",    "@pankod/refine-inferencer": "^2.0.2",    "next": "^13.0.6",    "next-compose-plugins": "^2.2.1",    "react": "^18.2.0",    "react-dom": "^18.2.0",    "@pankod/refine-supabase": "^4.1.0",    "nookies": "^2.5.2",    "@pankod/refine-mantine": "^1.2.0",    "@pankod/refine-react-table": "^4.7.2",    "@tabler/icons": "^1.39.1",    "@mantine/next": "^5.5.1",    "@emotion/react": "^11.10.4",    "@emotion/server": "^11.10.0",    "@pankod/refine-kbar": "^0.8.0"  },

Browser console gives 401 error from supabase.

{
    "code": 401,
    "msg": "invalid claim: missing sub claim"
}

{
    "code": 401,
    "msg": "invalid claim: missing sub claim"
}

40 Replies

refine-support-bot•2y ago

Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆
Answer: The code snippet provided shows how to override the login page to allow login with email. SOURCES: ./docs/advanced-tutorials/data-provider/appwrite.md

Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.

wee-brown•2y ago

Popup message is AuthApiError

other-emerald•2y ago

Hi @Devious, By default, the user will be redirected to /login if the checkAuth method rejects the Promise. Do you to redirect other page ? if you want, you can use this.

const authProvider: AuthProvider = {
    ...
    checkAuth: () => {
        ...
         return Promise.reject({
            redirectPath: "/custom-page",
        });
    }
}

const authProvider: AuthProvider = {
    ...
    checkAuth: () => {
        ...
         return Promise.reject({
            redirectPath: "/custom-page",
        });
    }
}

you can read this for more information: https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider/#checkauth

wee-brown•2y ago

I just want to go to /register, which I thought would work in default (it did when I tested antd).

other-emerald•2y ago

what was your authProvider implementation ? antd shouldn't related to this 🤔

wee-brown•2y ago

Default at the moment

import React from "react";import { AppProps } from "next/app";import { Refine } from "@pankod/refine-core";import {  AuthPage,  NotificationsProvider,  notificationProvider,  MantineProvider,  Global,  LightTheme,  ReadyPage,  ErrorComponent,} from "@pankod/refine-mantine";import routerProvider from "@pankod/refine-nextjs-router";import { dataProvider } from "@pankod/refine-supabase";import { MantineInferencer } from "@pankod/refine-inferencer/mantine";import { RefineKbarProvider } from "@pankod/refine-kbar";import { authProvider } from "src/authProvider";import { supabaseClient } from "src/utility";import { Title, Sider, Layout, Header } from "@components/layout";import { OffLayoutArea } from "@components/offLayoutArea";function MyApp({ Component, pageProps }: AppProps): JSX.Element {  return (    <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>      <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />      <NotificationsProvider position="bottom-right">        <RefineKbarProvider>          <Refine            routerProvider={routerProvider}            dataProvider={dataProvider(supabaseClient)}            authProvider={authProvider}            LoginPage={AuthPage}            notificationProvider={notificationProvider}            ReadyPage={ReadyPage}            catchAll={<ErrorComponent />}            resources={[              {                name: "posts",                list: MantineInferencer,                edit: MantineInferencer,                show: MantineInferencer,                create: MantineInferencer,                canDelete: true,              },            ]}            Title={Title}            Sider={Sider}            Layout={Layout}            Header={Header}            OffLayoutArea={OffLayoutArea}          >            <Component {...pageProps} />          </Refine>        </RefineKbarProvider>      </NotificationsProvider>    </MantineProvider>  );}export default MyApp;

import React from "react";import { AppProps } from "next/app";import { Refine } from "@pankod/refine-core";import {  AuthPage,  NotificationsProvider,  notificationProvider,  MantineProvider,  Global,  LightTheme,  ReadyPage,  ErrorComponent,} from "@pankod/refine-mantine";import routerProvider from "@pankod/refine-nextjs-router";import { dataProvider } from "@pankod/refine-supabase";import { MantineInferencer } from "@pankod/refine-inferencer/mantine";import { RefineKbarProvider } from "@pankod/refine-kbar";import { authProvider } from "src/authProvider";import { supabaseClient } from "src/utility";import { Title, Sider, Layout, Header } from "@components/layout";import { OffLayoutArea } from "@components/offLayoutArea";function MyApp({ Component, pageProps }: AppProps): JSX.Element {  return (    <MantineProvider theme={LightTheme} withNormalizeCSS withGlobalStyles>      <Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />      <NotificationsProvider position="bottom-right">        <RefineKbarProvider>          <Refine            routerProvider={routerProvider}            dataProvider={dataProvider(supabaseClient)}            authProvider={authProvider}            LoginPage={AuthPage}            notificationProvider={notificationProvider}            ReadyPage={ReadyPage}            catchAll={<ErrorComponent />}            resources={[              {                name: "posts",                list: MantineInferencer,                edit: MantineInferencer,                show: MantineInferencer,                create: MantineInferencer,                canDelete: true,              },            ]}            Title={Title}            Sider={Sider}            Layout={Layout}            Header={Header}            OffLayoutArea={OffLayoutArea}          >            <Component {...pageProps} />          </Refine>        </RefineKbarProvider>      </NotificationsProvider>    </MantineProvider>  );}export default MyApp;

oh, that posted badly

other-emerald•2y ago

i handled with prettier. its okay

wee-brown•2y ago

import { AuthProvider } from "@pankod/refine-core";import nookies from "nookies";import { supabaseClient } from "./utility";export const authProvider: AuthProvider = {  login: async ({ email, password }) => {    const { data, error } = await supabaseClient.auth.signInWithPassword({      email,      password,    });    if (error) {      return Promise.reject(error);    }    if (data?.session) {      nookies.set(null, "token", data.session.access_token, {        maxAge: 30 * 24 * 60 * 60,        path: "/",      });      return Promise.resolve();    }    // for third-party login    return Promise.resolve(false);  },  logout: async () => {    nookies.destroy(null, "token");    const { error } = await supabaseClient.auth.signOut();    if (error) {      return Promise.reject(error);    }    return Promise.resolve("/");  },  checkError: () => Promise.resolve(),  checkAuth: async (ctx) => {    const { token } = nookies.get(ctx);    const { data } = await supabaseClient.auth.getUser(token);    const { user } = data;    if (user) {      return Promise.resolve();    }    return Promise.reject();  },  getPermissions: async () => {    const user = await supabaseClient.auth.getUser();    if (user) {      return Promise.resolve(user.data.user?.role);    }  },  getUserIdentity: async () => {    const { data } = await supabaseClient.auth.getUser();    if (data?.user) {      return Promise.resolve({        ...data.user,        name: data.user.email,      });    }  },};

import { AuthProvider } from "@pankod/refine-core";import nookies from "nookies";import { supabaseClient } from "./utility";export const authProvider: AuthProvider = {  login: async ({ email, password }) => {    const { data, error } = await supabaseClient.auth.signInWithPassword({      email,      password,    });    if (error) {      return Promise.reject(error);    }    if (data?.session) {      nookies.set(null, "token", data.session.access_token, {        maxAge: 30 * 24 * 60 * 60,        path: "/",      });      return Promise.resolve();    }    // for third-party login    return Promise.resolve(false);  },  logout: async () => {    nookies.destroy(null, "token");    const { error } = await supabaseClient.auth.signOut();    if (error) {      return Promise.reject(error);    }    return Promise.resolve("/");  },  checkError: () => Promise.resolve(),  checkAuth: async (ctx) => {    const { token } = nookies.get(ctx);    const { data } = await supabaseClient.auth.getUser(token);    const { user } = data;    if (user) {      return Promise.resolve();    }    return Promise.reject();  },  getPermissions: async () => {    const user = await supabaseClient.auth.getUser();    if (user) {      return Promise.resolve(user.data.user?.role);    }  },  getUserIdentity: async () => {    const { data } = await supabaseClient.auth.getUser();    if (data?.user) {      return Promise.resolve({        ...data.user,        name: data.user.email,      });    }  },};

I referred to antd because I ran the create with antd to check if it was mantine specific and it worked.

wee-brown•2y ago

Logs from supabase

other-emerald•2y ago

UI packages do not matter for this. but examples from refine may difference. you can use this to go register page when authentication not resolved

checkAuth: async () => {
        const { data } = await supabaseClient.auth.getSession();
        const { session } = data;

        if (!session) {
                    return Promise.reject({
                    redirectPath: "/register",
            });
        }

        return Promise.resolve();
    },

checkAuth: async () => {
        const { data } = await supabaseClient.auth.getSession();
        const { session } = data;

        if (!session) {
                    return Promise.reject({
                    redirectPath: "/register",
            });
        }

        return Promise.resolve();
    },

wee-brown•2y ago

Will that not always redirect to register though?

other-emerald•2y ago

yes it will

wee-brown•2y ago

So i would think expected behaviour would be as follows: no session -> login click register on login page -> /register click forgot-password on login page -> /forgot-password

other-emerald•2y ago

Sorry, I couldn't follow exactly. What was the problem in implementing this business logic?

wee-brown•2y ago

The links on the login page do not redirect to /register when there is no session active