Simple Next.js & React Authentication With Clerk
Vložit
- čas přidán 17. 05. 2024
- In this project, we will buid an authentication system for Next.js using clerk. It can also be used with React SPAs and Remix.
Visit Clerk:
clerk.com
Project Code:
github.com/bradtraversy/clerk...
Clerk Docs:
Main: clerk.com/docs
Next.js: clerk.com/docs/nextjs/get-sta...
React: clerk.com/docs/quickstarts/ge...
Remix: clerk.com/docs/quickstarts/ge...
Follow Clerk On Twitter:
/ clerkdev
Timestamps:
0:00 - Intro
1:22 - Project Demo
5:07 - Next.js Setup
7:43 - Install & Setup Clerk
9:45 - Clerk Provider
12:24 - Header Component
17:23 - Protecting Pages - middleware.js
19:48 - .env routes
21:33 - Sign In Page
26:13 - Conditional Header Links
29:42 - UserButton Component
31:45 - UserProfile Component
33:35 - Email Signup & Verification Code
35:07 - Using Themes
37:13 - Start Custom Sign Up Flow
42:15 - Custom Form UI
44:29 - Handle Submit
46:35 - Email Verification
48:36 - Conclusion - Věda a technologie
One of the best tutorials on Nextjs + Clerk integration
Thanks for the video. It's extremely helpful when you mention small bits of information (ie. users are able to remove clerk brand icon if they use premium subscription). Although it's not directly related to coding itself, it's very informative since otherwise we noobies need to search on our own!
Thank you for the tutorial. Can not even explain how much I appreciate this. You're amazing!
Thank you Brad!!!
I ran across Clerk recently and I’ve been struggling a bit on applying Clerk correctly.
after looking and trying out other auth provider, clerk amaze me so much with its user friendliness .glad i subscribed in this channel. tnx more power!!
Thanks for the super-simple explanation and a first introduction to a delightful product. I'm so happy after days of searching around for a simple-to-use auth solution with a good tutorial for NextJS. I also appreciate that you decided to use Javascript and not Typescript.for this tutorial :)
This is the resource that made me decide to go with Clerk auth. I had a difficult time picking between Clerk and Firebase auth but this video helped a lot. Thanks :)
Hey you are awesome man. Please never stop making videos. Your website is also spot on
This video is gonna be really really helpful man! Thank you!
How are you doing Traversy? Glad to see you back. Didn't check out the tutorials lately cause it wasn't you) Hope you are doing well and see more awsome content from you.
I found another tutorial on this, and it had issues. Next time I look Brad has a tutorial on it. Brad to the rescue.
Thank you very much for this video tutorial. It is a great introduction to Clerk.!
Sincerely speaking, creating authentication with email verification can be stressful and boring. It is awesome having a third party to take that pain away and focus on the unique features of your application. Good job Travis
Thank you for the tutorial. It is really helpful!
Top tier tutorial, great work!
Heya thank you so much for this informative video. I really appreciate you putting so much time and efforts!!
I used clerk for a Remix app and i regret it. As soon as you need to customize something that's not documented, you're on your own. The discord help channel took a week for a reply. Luckily, brad has other videos on building your own auth which are great and that's what i ended up doing.
Most of Clerk is proprietary. If you want to export your data, you have to ask them to do it for you. Not a very comforting feeling. The Discord channel is disappointing.
same..... the tech is cool but needs more documentation or popularity
Very helpful video most especially, the customization part.
I watch all your videos 🎉. Really like it.❤
traversy: posts
me (pretends i dont have 3 more projects going on): finally! something to make
I appreciate your Video! Its really helpful! Thank You!
How would you make dynamic routes public using the middleware file. For example, if you have a blog that is public and want unauthenticated users to have access to posts/* . I can't find any docs or anybody on youtube explaining this use case.
I was having so many bugs when a user would try to sign in back with username and would give me a 404 page. After watching this video, I realized that I needed to have both sign-in and sign-up routes in the nested directory. Thank you so much
This is the most complete video on Clerk! Do you know how to get the jwt token from an axios interceptor?
Are you also gonna use Clerk as an auth. stack in your upcoming Next.js 13 featured course?
Sir, when do you plan to make video on Angular 2023? Your explanation is second to none.
Thanks bro! But How to change the clerk interface from English to another country's language?
I know javascript (basics) and I have started learning react(read some documentation) is this a good place to start with and can I start building projects starting with this video or should I start from doing simple projects on this website like to-do app or something .Can some one guide me here.
Is it possible to do auth with an express API and next js
Hey Brad thanks for the tutorial it was really awesome!
But if I ask is there any way you can store the the user data in your own local db instead?
I requested a video on what you ask, and the amazing guy recorded a video on how to store Clerk users in your own DB using Clerks middleware. The channels' name: LiveCode247. You will find the video.
Great vid! Would love a follow-up on syncing data to your own db. IE what you mention at 27:09. Would love to know how to set that up.
Why did you use the components folder in the app folder?
Teacher great video, I have a question, such as customizing the login screen and registering in my local language; In my country, we do not use the English language.
How does it compare with next auth
I want suggestions on what to use between these two
Another professional tutorial using Next.js & React Authentication With Clerk
Facing a clock skew error , any idea how to fix it ? 😪
And at 37:40 is where the video has covered all of the basics.
Can you create a vlog covering reset password (forgot password) and change password journey? I want this mainly from security pov.
Thank you❤🌹🙏
真不错，学习了。
Nice Sharing 👍
Thank you Traversy Media for this beautiful tutorial, loved it. I do have one ish though, my register button doesn't work but everything works fine but onclick of the button nothing happens even forked your repo and faced the same issue. I don't have any errors it just doesn't post, maybe I'm missing something
Did. you try with a different browser? Perhaps you've got some kind of ad blocker or popup blocker installed?
idk about anyone else, but i followed this tutorial on a macbook, and using npm run dev. But i had to close out the localhost window many times, and re run the npm run dev like each time i updated my code. it wouldn't load properly or at all if i didnt x out of the window and re run npm run dev. I hope this helps someone.
Nice one
Can you add this as an update for your E-Commerce Course @TraversyMedia?
Brad, I've been struggling with removing the header on the login and signup pages. any tips?
create a separate new layout file for login and sign-up pages and wrap the login , sign-up and new layout file created under folder named as "(auth or something)". Make sure the folder name enclosed with ().
@@areesh67 i tried that but then when I go back either by clicking on a link or browser back button, the header doesn't reappear
Even after refreshing the page ?!
@@areesh67 the refresh brings the header back. But i don't think this is acceptable user experience
@@nbo304 I too faced that issue 🙃
Hello, I didn't understand the [[...sign-up]] that much. Can anyone explain this better for me? Thanks!
how do i sync it with backend? suppose i have an express backend how do i do it, i cant find any videos
Trying to find a video with the clerk permissions using protect and org permissions. I’m trying to incorporate it into an app I’m building and no matter what I put I can’t see what the protect is hiding. Even logged into and admin account with org permission rights.
PLEASE UPDATE YOUR REACTJs COURSE(REACT FRONT TO BACK) ON UDEMY MR.TRAVERSY. Thank u ❤
I want to ask how can I add user roles like admin and user?
If you say use organization of clerk now if I use organization can I make all signup user with role user and then edit there role to admin from dashboard?
Why not do it in your own database?
@@r-i-ch yes but I am not storing user in database keeping them in clerk management
This is the limiting part of Clerk. You have to wait for them to support your favorite framework or implement some custom workaround that might be hacky. For example, to implement roles in Remix, how do you trigger an action to set the role after a user creates an account? You'd need some custom component. At that point, you might as well implement your own auth since you're putting in all of this work to customize things to your needs.
the sigh in page of clerk doesn't show up, just a white blank screen
Hello Brad when will you update your Next Course please update it.
hey brad do a python course i need to learn from the best instructor
thank
Please I need help with my project, I want a add a rich text editor to my content posting page, I use node Js, express and MongoDB Database,
I need help with tutorial or guide please
Please make a video about Nuxt authentication with laravel back and..
i'm having a problem since it says that the authMiddleware is now deprecated
Try this steps, `npm i @clerk/nextjs@4.30.0`, instead of this: "npm i @clerk/nextjs@lateset", I guess it is no longer valid if you are using the latest one.
Error: Clerk: Clock skew detected. This usually means that your system clock is inaccurate. Clerk will continuously try to issue new tokens, as the existing ones will be treated as "expired" due to clock skew.
To resolve this issue, make sure your system's clock is set to the correct time (e.g. turn off and on automatic time synchronization).
---
JWT cannot be used prior to not before date claim (nbf). Not before date: Thu, 19 Oct 2023 06:43:38 GMT; Current date: Thu, 19 Oct 2023 06:43:29 GMT; (reason=token-not-active-yet, token-carrier=cookie)
this is the consent error keeps coming even after deployment ... how can I fix this ???
timestamp: 48:09. Getting an error "status 422...error at submitHandler"..even after copy pasting from GH code "register/page".
I ran in to the same issue. I went in to my Clerk Dashboard, then to 'User & Authentication', then to 'Email, Phone, and Username, and clicked the cogwheel settings button to the side of 'Email address' under 'Contact Information'. From there, you can enable 'Email verification code' at the bottom of the settings menu and save it.
put 2x speed
3rd party for auth never is a good idea! Those start-ups are not stable and you're locked in and completely depend on their servers if anything happened with them your auth stop working. If their security fails your user data could leak. If they go out of business you loss all your users. And so many other things can go wrong....
Doing it on your own is also very risky, you cant cover all cases. Let alone stay updated on every new vulnerability. Its amways good to give it to 3rd party. But who's the 3rd party is more important
I agree with the leaking data part, but i don't think you'll loose your users if you kept all their information in your db and have prepared another authentication method as a fallback in case the primary service isn't working and if you maintain your website.
true but losing your users i doubt cause most likely you connect it somehow to your database and store user informations there as well
@Josh-yw9rc you don't have to write it all out your self there are tons of packages that take care of most of the code without having to share data with any 3rd party...
You can query for all the clerk user variables in your code and store them in your own db can’t you?
miss the intro video sound
First comment ❤❤
Great lacture about js bootstrap
I regret integrating it with my cryptotracker I am building. auth() only works on server components plus this keeps popping up after signing in
Uncaught Error: Clerk: Infinite redirect loop detected. That usually means that we were not able to determine the auth state for this request. A list of common causes and solutions follows.
Reason 1:
Your server's system clock is inaccurate. Clerk will continuously try to issue new tokens, as the existing ones will be treated as "expired" due to clock skew.
How to resolve:
-> Make sure your system's clock is set to the correct time (e.g. turn off and on automatic time synchronization).
Reason 2:
Your Clerk instance keys are incorrect, or you recently changed keys (Publishable Key, Secret Key).
How to resolve:
-> Make sure you're using the correct keys from the Clerk Dashboard. If you changed keys recently, make sure to clear your browser application data and cookies.
Reason 3:
A bug that may have already been fixed in the latest version of Clerk NextJS package.
Omg I’m getting the same stupid error did you find how to fix it please
@@ytbook9639 Try clearing localStorage and/or upgrading to the latest @clerk/nextjs version.
Please slow down😂...not missing another to go
I always slow down the playback so I can process better.
I’m a level 1 Autistic with severe ADHD and Dyslexia. It’s helped me immensely.
Cheers and have a wonderful and productive week ☕️
Third party authentication just wasting your time. Trust me in real application u dont need this. It looks simple, but actually a lot of things are lack. Sorry to say this. Its okay if u just wanna try it.
I have difficulties even running the project... After following the instructions 100% and then using the command 'npm run dev' i get a huge eror that i cannot seem to come by. I tried using chatgpt (as it has got some really good answers at times), but it doesnt seem to help. Other than a huge error message, i get this at the bottom: "SyntaxError: Unexpected token '??='
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object. (D:\Projekter
extjs-react-clerk-authentication
ode_modules
ext\dist\telemetry\post-payload.js:17:20)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)".
Its a long shot, but has anyone else experienced a similar behaviour? I checked my node version which is 14.16 and npm version 8.15. I also installed clerk in the dependencies. Thanks for reading.
@thecrap Update node to latest version and it should fix the problem