No Comments Yet
Be the first to share your thoughts and start the conversation.
Authentication Logic
Loading...
Loading...
Loading...
0 Comments
Be the first to share your thoughts and start the conversation.
👉 Bunny (create your free account and get one extra free month): https://jsm.dev/jsm-bunny
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
00:00:02 In this course, for the first time ever, we'll use BetterAuth to implement the authentication.
00:00:08 Many of you have requested it, so here it is.
00:00:11 It's one of the maybe better alternatives to NextAuth.
00:00:16 So let's go ahead and install it by heading over to Get Started, Installation, and you just need to say npm install BetterAuth.
00:00:24 So I'll do it right here in a new terminal, which I'll rename to Terminal so we can add additional commands within it.
00:00:32 And I'll simply run npm install betterauth.
00:00:35 While it is installing, let's create a new page for our environment variables right within the root of our application.
00:00:43 I'll call it .env.
00:00:46 And here we'll need a better auth secret, as well as a better auth URL.
00:00:55 So let me show you how to get those.
00:00:57 Right here within the installation, it says create an ENV file, secret key, and then click generate secret right here.
00:01:04 And they'll provide you your secret, which you can very simply copy.
00:01:07 And the same thing goes for the base URL.
00:01:10 So I'll just paste my secret and my base URL, which for now will be localhost 3000. Now, before we configure the rest of the better auth installation,
00:01:20 let's make sure to get our Google Cloud Console key so we can implement Google authentication.
00:01:25 Head over to console.cloud.google.com, don't ask me how I remembered that URL, and then create a new project.
00:01:34 I'll call it something like jsmloom clone and click create.
00:01:38 It'll take just a second for it to get created.
00:01:41 And once it's done, just click Select Project.
00:01:43 Next, within the search bar, search for branding and click Get Started.
00:01:49 Provide the name of the application.
00:01:51 In this case, I'll do JSM Loom Clone, but maybe we can do something better, like Snapcast.
00:01:59 And you'll have to enter your email.
00:02:02 You can mention that this is an external application available to any test user with a Google account.
00:02:07 And you'll have to give another email address and finish it.
00:02:11 Once you're done with the branding, head over to clients.
00:02:16 And here you can create your first OAuth 2.0 client.
00:02:20 Choose the application type and select web.
00:02:23 For the name, once again, you can do whatever you want.
00:02:26 I'll say Snapcast.
00:02:27 For the authorized JavaScript origins, type HTTP colon forward slash forward slash localhost 3000. Copy it and click add.
00:02:39 And then for the authorized redirect URI, copy the same thing, but append to it forward slash EPI forward slash auth forward slash callback forward slash Google.
00:02:53 This is the URL where we'll actually authenticate our users.
00:02:57 This is our application's authentication URL and click create.
00:03:02 This will give you your client ID and secret.
00:03:05 So go ahead and copy it.
00:03:08 And then right here, you can say Google, underscore client, underscore ID, paste it here and do the same thing with a secret.
00:03:19 So I'll say Google client secret.
00:03:23 And just to keep our environment variables structured right here at the top, I'll say better auth.
00:03:31 And here I'll add a comment for Google.
00:03:35 Perfect.
00:03:37 Now, just to be able to get access to the profile photos from people creating their accounts, you also have to enable the Google People API.
00:03:47 So search for it and just click enable.
00:03:50 Later on, we'll use this from within our application.
00:03:53 Perfect.
00:03:54 With that, we have all of the necessary keys needed in order to set up our authentication.
00:03:59 But if you think about it, authentication is so deeply interconnected with the rest of our database structure.
00:04:07 When we create a new user, we have to create it and store it somewhere that is not just within our browser, but also within our database.
00:04:17 So in the next lesson, let's set up our entire database so that once we sign the users in, we can also store them within the database and then we can allow
00:04:27 them to create and share new videos under their user profile.
