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 :)
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!
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.
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
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!!
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.
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 :)
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
Great tutorial done in Jul 10, 2023, currently going through it now June 23rd 2024. There are changes in clerk that has broken some changes in this code's tutorial. Eg new documentation for middleware, and also for auth import from '@clerk. I'm at the 28 minutes mark so guess others still to be discovered. General public should take note though.
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.
@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...
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.
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.
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.
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 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?
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.
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.
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
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.
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 ???
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.
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?
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.
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 ().
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
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 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.
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 ☕️
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.
One of the best tutorials on Nextjs + Clerk integration
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 :)
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!
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
send yt link to channel brad channel pls
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. Can not even explain how much I appreciate this. You're amazing!
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!!
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 you are awesome man. Please never stop making videos. Your website is also spot on
traversy: posts
me (pretends i dont have 3 more projects going on): finally! something to make
Thank you Brad!!!
I ran across Clerk recently and I’ve been struggling a bit on applying Clerk correctly.
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.
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 most complete video on Clerk! Do you know how to get the jwt token from an axios interceptor?
Top tier tutorial, great work!
Very helpful video most especially, the customization part.
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
Heya thank you so much for this informative video. I really appreciate you putting so much time and efforts!!
Thank you very much for this video tutorial. It is a great introduction to Clerk.!
And at 37:40 is where the video has covered all of the basics.
Thank you very much for this tutorial
This video is gonna be really really helpful man! Thank you!
I watch all your videos 🎉. Really like it.❤
I appreciate your Video! Its really helpful! Thank You!
Sir, when do you plan to make video on Angular 2023? Your explanation is second to none.
Great tutorial done in Jul 10, 2023, currently going through it now June 23rd 2024.
There are changes in clerk that has broken some changes in this code's tutorial.
Eg new documentation for middleware, and also for auth import from '@clerk.
I'm at the 28 minutes mark so guess others still to be discovered.
General public should take note though.
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?
Thank you for the tutorial. It is really helpful!
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.
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.
真不错，学习了。
Are you also gonna use Clerk as an auth. stack in your upcoming Next.js 13 featured course?
Nice Sharing 👍
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.
Another professional tutorial using Next.js & React Authentication With Clerk
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.
Can you create a vlog covering reset password (forgot password) and change password journey? I want this mainly from security pov.
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 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?
Facing a clock skew error , any idea how to fix it ? 😪
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.
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.
the sigh in page of clerk doesn't show up, just a white blank screen
Thanks bro! But How to change the clerk interface from English to another country's language?
.How can we create a payment registration form? Users must pay or subscribe to the application to register.
How does it compare with next auth
I want suggestions on what to use between these two
how do i sync it with backend? suppose i have an express backend how do i do it, i cant find any videos
Why did you use the components folder in the app folder?
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?
What about react js? how do u setup using react js?
Hey now that authMiddleware is depricated how do i add public and private routes
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.
Thank you❤🌹🙏
Is it possible to do auth with an express API and next js
PLEASE UPDATE YOUR REACTJs COURSE(REACT FRONT TO BACK) ON UDEMY MR.TRAVERSY. Thank u ❤
Hello Brad when will you update your Next Course please update it.
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 ???
Can you add this as an update for your E-Commerce Course @TraversyMedia?
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
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.
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.
How can we make cıstom signIn page?
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!
Nice one
miss the intro video sound
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
First comment ❤❤
Great lacture about js bootstrap
thank
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.
put 2x speed
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 ☕️
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