Migrate from CRA to Next.JS

CRA authentication is no longer working for my project, how can I change from CRA to Next.JS

5 Replies

Hi @ely8891. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the provided extracts do not contain specific information on how to migrate from Create React App (CRA) to Next.js. However, they do provide some insights on setting up a Next.js project and implementing authentication using NextAuth.js or refine's built-in authentication features. Here's a general guide based on the information available: 1. Create a new Next.js project: You can create a new Next.js project using the create-next-app command. You will be prompted to enter your project name to complete the installation. You can use either yarn or npm as your package manager.

yarn create next-app

yarn create next-app

2. Start the project: Once the installation is completed, move into your project directory and start the project using the yarn dev command.

yarn dev

yarn dev

3. Install NextAuth package: If you want to use NextAuth for authentication, you can install it using the yarn add next-auth command.

yarn add next-auth

yarn add next-auth

4. Implement Authentication: In Next.js, you can achieve authentication control in multiple ways. On the client-side, you can wrap your pages with the Authenticated component from @refinedev/core to protect your pages from unauthenticated access. On the server-side, you can use your authProvider's check function inside server-side functions (getServerSideProps) to redirect unauthenticated users to other pages like login. For page-level authentication, the server-side approach is recommended. Source (https://refine.dev/docs/router-integrations/next-js/#authentication) Please note that this is a general guide and the specifics might vary based on your project requirements. For detailed instructions, you might want to refer to the official Next.js and refine documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@274276392286289921> kapa.ai is still learning and improving, please let us know how it did by reacting below

quickest-silver•8mo ago

@kapa.ai Is the CRA Legacy still supposed to work? or is my issue with the authprovider methods not being called unrelated?

correct-apricot•8mo ago

Hey @ely8891, sorry for the issue. Can you check this release notes https://github.com/refinedev/refine/releases/tag/%40refinedev/core%404.46.0 ?We released an update on the Authenticated component last week which might be the cause for your issue. Its very easy to fix btw 🚀

GitHub

Release @refinedev/core@4.46.0 · refinedev/refine

Minor Changes #5343 dd8f1270f6 Thanks @alicanerdurmaz! - fix: hideForm should remove all form fields. (submit button, form fields, rememberMe checkbox, forgot password link, etc.) but the /regist...

quickest-silver•8mo ago

yo cheers, I applied unique keys to each authenticated element. Despite that, when I mutate Login for example, it's never called. It worked up until X time ago (7 months at most) - I left the project untouched