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.
Browser console gives 401 error from supabase.
40 Replies
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
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.
other-emeraldOP•2y ago
Popup message is AuthApiError
stormy-gold•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.
you can read this for more information:
https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider/#checkauth
other-emeraldOP•2y ago
I just want to go to /register, which I thought would work in default (it did when I tested antd).
stormy-gold•2y ago
what was your
authProvider
implementation ? antd shouldn't related to this 🤔other-emeraldOP•2y ago
Default at the moment
oh, that posted badly
stormy-gold•2y ago
i handled with prettier. its okay
other-emeraldOP•2y ago
I referred to antd because I ran the create with antd to check if it was mantine specific and it worked.
other-emeraldOP•2y ago
Logs from supabase
stormy-gold•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
other-emeraldOP•2y ago
Will that not always redirect to register though?
stormy-gold•2y ago
yes it will
other-emeraldOP•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
stormy-gold•2y ago
Sorry, I couldn't follow exactly.
What was the problem in implementing this business logic?
other-emeraldOP•2y ago
The links on the login page do not redirect to /register when there is no session active
stormy-gold•2y ago
do you have
/pages/register.tsx
?other-emeraldOP•2y ago
Here:
https://dev.sapphirecrm.io
Exposed local env
I swizzled the auth components from mantine
so I get the authpage from
import { AuthPage } from "@components/pages/auth";
Yes I have them loadedother-emeraldOP•2y ago
this is on next.js
other-emeraldOP•2y ago
This is the default authenticated.tsx page when I swizzle it
stormy-gold•2y ago
I believe i understand.
nextjs makes routing from file system. and refine detects this with pages/[[...refine]].tsx. its quite diffrence from react-router.
I think this needs to be emphasized in the docs. I'll add this to our backlog and try to prioritize to avoid confusions in the future.
if you move your register.tsx to pages/register.tsx
probably problem will solve
or you can move pages/register/index.tsx of course
other-emeraldOP•2y ago
let me try
That is strange though, because login.tsx from
src/components/pages/auth/components
works
This is the index.tsx from the auth folder
stormy-gold•2y ago
actually, you are right we will consider this
other-emeraldOP•2y ago
Perhaps I will remake with cra instead
stormy-gold•2y ago
we think this is confusing too. we have plan to simplify this on refine v4
other-emeraldOP•2y ago
I kind of wanted to make use of ssr on next though
I can try remix too to see if the behaviour is the same
stormy-gold•2y ago
is /register now working ?
other-emeraldOP•2y ago
I need to rejig
as when I moved the auth folder to pages, and updated imports it broke
No, it still isn't working
other-emeraldOP•2y ago
like-gold•2y ago
Hey @Devious, Next.js and Remix use file-system based routing.
Initially in Next.js it's the
/pages
directory and its content. When you create a Refine app using create-refine-app
, it will create a route under /pages
with name [[...refine]].tsx
which is used to render resource pages/actions.
Such as, if you define a posts
resource with list: PostList
component, then [[...refine]].tsx
route will be used to render the PostList
component under /posts
([[...refine]].tsx
route is an optional catch-all route, which means you can define posts.tsx
file under /pages
and handle the rendering of the page yourself. An optional catch-all route won't be rendered if there's a more specific route defined in /pages
)
When you're using an authProvider
, refine will handle the /login
route for you, since its the default route we redirect after failed attempts to the authorized routes (such as resource routes created from the resources
prop)
But the other pages such as /register
or /forgot-password
are not created by refine.
We provide the <AuthPage />
component as an helper component, so you can just plug it in, customize it as you like and it will do the communication with the authProvider
you've passed to the <Refine />
component.
When you see routes like /login?to=register
it means, [[...refine]].tsx
is used to render this /register
route.
Since we do checkAuth
check in [[...refine]]
page before rendering the resource components, /register
is treated just like them. So when you navigate to /register
refine will run checkAuth
and since it rejects, refine will navigate to /login
.other-emeraldOP•2y ago
I had to update the component imports as
export * from ./register'
is not allowedlike-gold•2y ago
So as a solution, you need to define the
/register
route inside your /pages
directory (not /src/pages
or /src/components/pages
)
When you define the /register
route, you can do simply;
So it will render the AuthPage
in type register
in that route.
We need to admit that there's a gap in this part of the docs. We'll try our best to come up with a more detailed documentation about Authentication in Next.js and Remix since it's easy to mix the solutions of React Router v6 with these above.
The update will happen in both refine's next.js docs and in auth provider sections of the tutorial so we won't make any misleads about those.other-emeraldOP•2y ago
Yeah, I am not completely following. as the auth/index.tsx has render components for register, forgot password and update password
for props
other-emeraldOP•2y ago
other-emeraldOP•2y ago
okay, it works when I make CRA with supabase
Okay, I get it
have it working
notable-maroon•2y ago
@Devious if you don't mind, can you explain how this works? I don't want to start over and use CRA though so I'm kinda stuck on how to use the components given for the register page etc.
other-emeraldOP•2y ago
Hmm
@kitkatnik So because of the way routing works in remix/nextjs you need a component in the 'right' location which will essentially return the correct register/forgot password component.
other-emeraldOP•2y ago
Something like this
other-emeraldOP•2y ago
Then in your login component, you have the links like this:
other-emeraldOP•2y ago
sorry, not a regular discord user, so only seeing your message now
notable-maroon•2y ago
No worries! This is super helpful, I appreciate the visuals! 😄