xenial-black•2y ago

How use AuthPage for register with Next.JS?

I'm testing Refine and I wanted to use next.js and mantine to plug a frontend to supabase. I'm trying to use the mantine registration page but the router cannot accept routes as it is file-based. Do you know how I can add the routes? Disclaimer: I have little knowledge on React/Next but none on Mantine or Refine

10 Replies

yelping-magenta•2y ago

Hey @kaizensparc you can use file based routing, it wont conflict with refine’s nextjs router

yelping-magenta•2y ago

Check out this example https://refine.dev/docs/examples/next-js/

Ant Design | refine

refine allows you to build your SSR supported web applications using Next.js. With this example, you can see how to make a simple SSR supported CMS Admin panel using Ant Design.

yelping-magenta•2y ago

We used refine’s router and custom pages in that one

xenial-black•2y ago

Hi 🙂 Is there somewhere in the example where it uses a registration page? I wanted to use refine-mantine AuthPage but I don't understand how 😅 I wanted to do something like

import AuthPage from "@pankod/refine-mantine";

function Register() {
  return <AuthPage type="register" />
}
export default Register;

import AuthPage from "@pankod/refine-mantine";

function Register() {
  return <AuthPage type="register" />
}
export default Register;

yelping-magenta•2y ago

AuthPage should be name-imported rather than the default but other than that this looks good actually 😅

xenial-black•2y ago

Mmmh sorry I'm a newbie, what do you mean?

yelping-magenta•2y ago

the import line should be

import { AuthPage } from "@pankod/refine-mantine";

import { AuthPage } from "@pankod/refine-mantine";

xenial-black•2y ago

Oh. I guess I need to learn about that too 😅 Thank you, I didn't know there was a difference between those two

yelping-magenta•2y ago

Let me come up with a basic example for you using mantine + auth provider in next.js Sorry, had some trouble with Stackblitz and Codesandbox 🤦‍♂️ Created a repo with Mantine + Next.js and added a dummy auth provider with register. If you clone and run the app, you need to register an account first to be able to log in 🚀 https://github.com/aliemir/with-nextjs-mantine

xenial-black•2y ago

Oh thank you!