Simple Next.js & React Authentication With Clerk 

One of the best tutorials on Nextjs + Clerk integration

Thank you Brad!!! I ran across Clerk recently and I’ve been struggling a bit on applying Clerk correctly.

Thank you for the tutorial. Can not even explain how much I appreciate this. You're amazing!

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!

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!!

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

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 :)

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.

This video is gonna be really really helpful man! Thank you!

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

Heya thank you so much for this informative video. I really appreciate you putting so much time and efforts!!

Very helpful video most especially, the customization part.

I watch all your videos 🎉. Really like it.❤

Top tier tutorial, great work!

Thank you for the tutorial. It is really helpful!

traversy: posts me (pretends i dont have 3 more projects going on): finally! something to make

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.

Sir, when do you plan to make video on Angular 2023? Your explanation is second to none.

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

I appreciate your Video! Its really helpful! Thank You!

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?

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.

I found another tutorial on this, and it had issues. Next time I look Brad has a tutorial on it. Brad to the rescue.

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?

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.

Another professional tutorial using Next.js & React Authentication With Clerk

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.

Can you create a vlog covering reset password (forgot password) and change password journey? I want this mainly from security pov.

How does it compare with next auth I want suggestions on what to use between these two

Thanks bro! But How to change the clerk interface from English to another country's language?

Can you add this as an update for your E-Commerce Course @TraversyMedia?

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

And at 37:40 is where the video has covered all of the basics.

真不错，学习了。

Hello Brad when will you update your Next Course please update it.

the sigh in page of clerk doesn't show up, just a white blank screen

Nice Sharing 👍

Why did you use the components folder in the app folder?

i'm having a problem since it says that the authMiddleware is now deprecated

PLEASE UPDATE YOUR REACTJs COURSE(REACT FRONT TO BACK) ON UDEMY MR.TRAVERSY. Thank u ❤

Please make a video about Nuxt authentication with laravel back and..

hey brad do a python course i need to learn from the best instructor

Nice one

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.

how do i sync it with backend? suppose i have an express backend how do i do it, i cant find any videos

Facing a clock skew error , any idea how to fix it ? 😪

Thank you❤🌹🙏

Is it possible to do auth with an express API and next js

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.

I used react components signin and signup now I need route of my application when i click is sign in form 'create use account: signup' on this how can I set path?

Hello, I didn't understand the [[...sign-up]] that much. Can anyone explain this better for me? Thanks!

timestamp: 48:09. Getting an error "status 422...error at submitHandler"..even after copy pasting from GH code "register/page".

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.

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 ???

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?

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....

Brad, I've been struggling with removing the header on the login and signup pages. any tips?

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

miss the intro video sound

thank

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.

put 2x speed

Please slow down😂...not missing another to go

First comment ❤❤ Great lacture about js bootstrap

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.