magic-amber•2y ago

add forgot-password to @pankod/refine-nextjs-router

The example in @pankod/refine-nextjs-router does not offer the forgot-password. Is it possible to add forgot-password similar to @pankod/refine-react-router-v6? Thank you.

9 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: It is possible to add forgot-password similar to @pankod/refine-react-router-v6. SOURCES: ./docs/api-reference/mui/components/auth-page.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.

plain-purple•2y ago

Hey @maxdata, refine and router packages do not create auth pages manually. You need to create them yourself. For example in nextjs you can create a page like this: pages/forgot-password.tsx

import React from "react";
import { AuthPage } from "@pankod/refine-chakra-ui";

const ForgotPassword = () => {
  return <AuthPage type="forgotPassword" />;
};

export default ForgotPassword;

import React from "react";
import { AuthPage } from "@pankod/refine-chakra-ui";

const ForgotPassword = () => {
  return <AuthPage type="forgotPassword" />;
};

export default ForgotPassword;

magic-amberOP•2y ago

Hey @salihozdemir is it possible to move to /pages/auth/forgot-password.tsx. It seems like modifying the path in routerProvider does not work for next.js route. Thank you.

plain-purple•2y ago

Yes, it’s possible. If you use nextjs, router provider doesn’t support custom pages. You can find more information here: https://refine.dev/docs/advanced-tutorials/ssr/nextjs/

Next.js | refine

refine can be used with Next.js to SSR your pages. It doesn't get in the way and follows Next.js conventions and also provides helper modules when necessary.

magic-amberOP•2y ago

Hey @salihozdemir do I need to create all the other auth pages if using next.js for example login, sign up, forgot password? It seems none of them are working default in next.js. How about "Send reset instructions" in "forgot password"? It seems not working in next.js as well. 😦

plain-purple•2y ago

Yes, you need to create custkm pages whether nextjs or cra. It does no matter.

magic-amberOP•2y ago

Hey @salihozdemir After consideration, I have determined that React Query is a more suitable solution for the Refine platform. It offers better support by default and requires fewer lines of code to handle authentication, as demonstrated in this example: https://github.com/refinedev/refine/tree/master/examples/auth-chakra-ui. I have decided to switch from Next.js to React Query in Refine. Although Next.js has the advantage of pre-rendering, I believe I can still utilize caching in React Query? Thank you.

plain-purple•2y ago

Nextjs is a react framework but react-query is a just library. So, we can’t compare each other. But, yo’re right react-query has so great featurues. If you develop a refine app you dont need to think about caching. Refine handles it for you🚀

magic-amberOP•2y ago

Yes. The Refine platform is so powerful and can accomplish a lot with just a few lines of code.

add forgot-password to @pankod/refine-nextjs-router

Did you find this page helpful?