Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
Implement Google SignIn
Loading...
Loading...
Complete source code available till this point of lesson is available at
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
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:02 The process of signing up with any kind of an OAuth provider is almost the same for all providers.
00:00:08 Here it says GitHub, but you can basically think of it as Google, Facebook, or whatever else it is.
00:00:13 So we'll once again follow very similar steps.
00:00:16 But this time, instead of heading over to github.com, you'll want to head over to console.cloud.google.com and create a new project.
00:00:27 I'll give it a name of Devflow and choose no organization and click create.
00:00:33 The project is getting created.
00:00:34 So let's give it a second.
00:00:36 There we go.
00:00:36 Let's click select project and open up the navigation menu and go to APIs and services and OAuth consent screen.
00:00:45 Here you'll need to select external, meaning that it is for outside users coming to our app.
00:00:50 Click create.
00:00:52 And then you'll have to enter your application name.
00:00:55 I'll go with Devflow and choose my support email.
00:00:58 You can also enter your app logo by finding it within your public folder, but it definitely shouldn't look like this.
00:01:04 It has to be a square.
00:01:05 So instead of a logo, I could use this dark illustration right here.
00:01:10 That's a bit better.
00:01:12 For the app domain, you'll have to enter the same thing as on GitHub, HTTP localhost 3000, and you can copy this link and enter it for the privacy policy
00:01:23 as well as application terms of service.
00:01:26 Next, for the Developer Contact info, you can enter your own email.
00:01:30 I'll enter mine, and then click Save and Continue.
00:01:34 Skip the Scopes menu, as well as the Test Users menu, and go back to the dashboard.
00:01:40 Go to Credentials, Create New Credentials, select OAuth Client ID.
00:01:45 For Application Type, we'll be doing a web application, but who knows, we might do some mobile ones soon as well.
00:01:52 Let's enter the name, such as Web Client Devflow, And we need to add authorized JavaScript origins.
00:02:01 In this case, that'll be HTTP colon forward slash forward slash localhost 3000. And we need to add a redirect URI.
00:02:10 So that's gonna be HTTP colon forward slash forward slash localhost 3000 forward slash API forward slash auth forward slash callback forward slash Google.
00:02:22 Same thing as in with GitHub.
00:02:25 And let's click create.
00:02:26 As soon as you do that, you'll be given a client ID and a client secret.
00:02:30 So copy them one by one, go back to your app and head over to .env.local.
00:02:36 Add them right here by saying auth Google ID is equal to this string and then copy the client secret and add it as auth Google secret.
00:02:50 is equal to this string right here.
00:02:52 Go back to your auth.ts file and modify the list of providers to now include Google.
00:02:59 In our social auth form, we have already made our handle sign in function dual, which means that it supports both GitHub and Google.
00:03:07 And we have our own Google button right here, which logs us in with Google.
00:03:12 So what do you say that we give it a shot?
00:03:14 I'll click login with Google.
00:03:16 I selected my user account and now I can sign into Devflow by clicking continue.
00:03:21 There we go, we are in and let's take a look at how our session looks now.
00:03:27 Oh, it's the same thing.
00:03:28 Session, username, email, image, all works in the same way as it did with GitHub.
00:03:34 This is absolutely amazing.
00:03:37 You have just implemented OAuth using both GitHub and Google.
00:03:42 That definitely deserves a celebration.
00:03:44 And you know what else it deserves?
00:03:46 A commit, we can commit all of the things that we have added so far.
00:03:51 So let me think of a fitting commit message.
00:03:53 It's going to be set up auth, layouts, social auth form, next auth, OAuth with Google and GitHub providers, commit and sync.
00:04:08 Great.
00:04:09 Our form is looking great.
00:04:12 And not only is it looking great, but it is fully functional.
00:04:15 And even though that nowadays most people prefer to just log in with GitHub or Google, we still need to add some form fields for people that want to use
00:04:23 their email.
00:04:24 For people that don't trust GitHub or Google with their data and just want to use their email.
00:04:29 So let's do that next.
