Next.js App Router Authentication ( Cookies, JWTs)- Part 4.4 Epic Next.js Tutorial for Beginners
Vložit
- čas přidán 28. 03. 2024
- Let's see how to do auth in Next with HTTPonly cookies and JWT. Checkout the post for code snippets here strp.cc/3PELQUz
🚀 In today's React tutorial, we will take a look on how to set up next authentication using HTTPonly token. Whether you're a beginner or looking to upscale your Next.js and Strapi skills, this video is packed with actionable insights.
Topics Covered
- How to implement user authentication in Next.js using Strapi as the backend.
- The process of registering users and handling JWT tokens for secure sessions.
- Handling errors gracefully with a custom Strapi errors component.
- Managing HTTP-only cookies in Next.js for added security.
- Enhancing UX with dynamic submit buttons and form status handling.
Remember to check out the complimentary article for all the code snippets you need! Let's get started.
Key Topics
- How to instal Zod
- Creating your first Zod schema
- Using safeParse to validate our form data
- Return errors via server action
- Create error component to display our Zod errors
Whether you're just catching up or have been with us from the start, this lesson is packed with great tips to help you build your Next.js project.
Project repo on GitHub: strp.cc/49HdLeD
-----------------------------------------------------------------------------------------------------------------------
Resources
------------------------------------------------------------------------------------------------------------------------
Docs: docs.strapi.io/dev-docs
Strapi Events: strp.cc/events
Find help on Discord: strp.cc/discord-events
Find help in our Forum: strp.cc/40EvYp0
------------------------------------------------------------------------------------------------------------------------
Strapi
------------------------------------------------------------------------------------------------------------------------
Get started with Strapi: strapi.io
Strapi Cloud: strapi.io/cloud
Try the live demo: strapi.io/demo
Strapi Blog: strapi.io/blog
Strapi Starter Project: github.com/strapi/nextjs-corp... always, thank you for your continuous support
Thank you; we would love to see more value added by integrating with other providers like Google, Facebook, and others. Specifically, delving deeper into the user registration process would be immensely beneficial. Additionally, since the videos on CZcams cover Strapi version 3, an update or additional content focusing on the latest version could be incredibly helpful.
Looking forward to more insightful content!
Thank you for your feedback. I will add this to our list of topics to cover as stand alone videos.
Extremely helpful series of videos, looking forward to the next ones. Thanks!
Thank you, glad you find it helpful.
Hey, thank you for these videos, I would be happy to see how to authenticate users via next-auth js with different providers.
I decided to go the basic route first, but we will cover other providers that are available in Strapi like Google, Facebook and many others.
In terms of Next Auth, I saw many mixed reviews around user experience and docs. So I need to spent a little more time understanding Next Auth.
But it is on the list of future videos to make.
@@Strapi Glad to hear it, please cover the auth0 too.
Thanks for these videos! Much needed to clarify Strapi + NextJS integration with App Router. I was wondering... what's the purpose of the "loading" prop in the Submit Button component? It's not passed in the submit form and there isn't a default value, therefore it is undefined. Will it be used later?
Hey, that's a great question. I had a feeling someone would ask about it when I recorded the video.
I will use that same button later in the video in a form submission that will not use server action.
Instead, we will be using the api routes during which we will not have access to the useFormState; we will pass it as a prop instead.
@@Strapi then I can continue in peace :) Thank you again for this series. It is exactly what I needed to prepare for my upcoming project, first one with both Strapi and NextJS!
It was useful to understand how to add a new provider. They are in the Purest and Grant library, but they are not on the list of providers.
hey how you are getting jwt token
You should be getting it from cookes via cookies.get github.com/PaulBratslavsky/epic-next-course/blob/main/frontend/src/data/services/get-token.ts
How to set up strapi account ? And is it free ?
Strapi is free and open source; you have the freedom to deploy it anywhere you want.
Ive downloaded strapi in my already existing project ( next js, tailwind , typescript). Its my first time using it. So i downloaded it using npx create-strapi-app@latest backend which creates backend folder. I then navigate to that folder using cd backend and then run this command : npm run develop.
But this command shows me an error related to tsconfig ( typescript error) im unable to run it
hi, will you show how create user login form logic?
Do you mean how to get the data from the form and validate it? Did you have the chance to check out the previous video? czcams.com/video/QWnI3H_Qah4/video.htmlsi=3aeTH1GjFJ12clDv