In this chapter, we're going to add GitHub and Google Auth to our project. So let's go ahead and make sure we are logged out. This way we can visit the login screen. There we go. So we have buttons, continue with GitHub and Google, but right now they're not doing anything.
So let's go ahead and open BetterAuth documentation and under their authentication here you can find GitHub. So let's go ahead and first grab our GitHub credentials. So I recommend looking at the documentation because it's really good, it's up to date and it will help you navigate through all of the links you have to visit. So go ahead and click GitHub Developer Portal. So in my case, I have a bunch of OAuth apps here because I create these tokens all the time but for you it might be completely empty depending on how often you use this.
So to use GitHub Sign-In you need a client ID and a client secret. So let's go ahead instead of OAuth apps, click new OAuth app and in here let's go ahead and call this node base development and set the homepage URL to be this. Localhost 3000 forward slash API forward slash out callback GitHub for production. You should set it to the URL of your application. Exactly that is why I'm calling this one node base development.
And let's go ahead and see what we need to add. Oh, my apologies. This is authorization callback URL. And this is just localhost 3000, the homepage URL. And now click register application.
And in here you have the client ID so you can immediately go ahead and add a GitHub underscore client underscore ID in your dot environment here. So I'm going to add github under store client underscore ID and then I will prepare github underscore secret. I'm not sure what it is. Client secret. All right.
Client secret. In order to generate the client secret we need to click on a button, generate a new client secret and most of the time you will need to do two-factor authentication here. And once you approve two-factor authentication you can copy this, your client secret. Make sure to copy it immediately and add it here. There we go.
So now we have GitHub client ID and we have a GitHub client secret. Great. Now let's go ahead and go instead of our source libauth.ts. In here we have email and password and just below it let's add social providers. Let's add GitHub client ID and we can go ahead and copy this.
And we can do the same thing for client secret. And just copy GitHub client secret. I always recommend that you double, triple check, copy from here, paste it here, copy from here, paste it here because people often miss typos and the errors are very cryptic and then you have no idea what's wrong. 99% chance it's a typo. So just make sure you're doing it correctly.
Great. And now we have to add the function here to sign in with a GitHub provider. So We have to do that in, well, let me see. Instead of source, features, auth. Okay, we have login form and the register form.
Let's go inside of login form first. And besides on submit, I'm gonna do const sign in GitHub like this, asynchronous, const data await out client sign in social provider GitHub. And I think we don't actually need that data. And I'm not sure if I can also do now on success here. I can.
Great. On success, router push forward slash on error, toast error. Something went wrong. All right. Let's go ahead and just copy this and already prepare it for Google as well.
Sign in Google provider. Google. That's it. That's all we need. Then we're gonna go ahead here in continue with GitHub and give it an onclick sign in Google.
My apologies GitHub obviously. And let's do this one Sign in Google. So make sure you are on the login screen because that's where we just added this. So I'm going to click continue with GitHub right here and there we go. I now have to authorize my GitHub profile and let's see once I authorize it if I will be logged in and I am logged in.
Amazing. And I think that if I try to do new workflow, I have a prompt to upgrade to pro. Amazing. So now I'm gonna go ahead and sign out. And if I try log in with Google, something went wrong because we haven't set that up.
But just before we do it, let's make sure that we copy sign in with Google and sign in with GitHub here. And I'm not sure if you noticed, yes, but we just use a login page to create a new account. So yes, you don't need separate functions. You can just copy exactly as they are. So you can have your usual sign in with GitHub and sign in with Google, and you can just add them to the register form.
It really does not matter. So if it has an account, it's going to log in. If it doesn't, it's going to create an account. So that's kind of a cool feature. You don't have to create anything different for register.
Great. So Google is notoriously more complicated than this, unfortunately, but let's go ahead and click on Google and let's start by visiting the Google Cloud console. So inside of here, let me just zoom in. I think the best way to start actually is by creating a new project. So click on your projects right here and click new project and call this node base and click create.
Then wait a second for this to be created and then select that project. This way you won't add any new services or API keys to your previous projects and it will all be stored in here. And now let's follow what we have to do. So we need to go to credentials and authorize the redirect URIs. Okay.
So I can find credentials here. Maybe they've improved, maybe it's easy to do now. And basically this is what happens. You click on credentials and you get ready to do them. And then you see that you also have to do the consent screen.
So I guess let's first click on configure consent screen or just go instead of OAuth consent screen. And then That takes you here. Google Auth Platform not configured. Get started with configuring your application's identity and manage credentials. So then you click get started.
This is what I was telling you about. It feels like they're in the middle of a refactor and they take you from one place to another. So I have no idea how I even got here, to be honest. But looks like I'm instead of Google out platform overview create branding. All right, let's call this node base.
Let's go ahead and select an email next for the audience. Make sure you select external so everyone will be able to use this, not just your test users. Click on next. Add your email address here. Finish and I agree to the Google API services.
Click continue and click create. The reason I don't like Google Cloud is because it's very hard to create tutorials this way, right? I have no idea how I got to this place. I just clicked on a bunch of different warnings and pop-ups, right? Okay, so I guess we now have branding.
That's good. Do not add app logo. If you add app logo you will need to verify your app and that can take a long time. Do not add your app logo. Just do it exactly like this.
Okay, so now I'm just figuring this out along with you. I think that maybe I can even now go back here and maybe If I go inside of APIs and services, I can now go inside of credentials. There we go. I can now go inside of credentials. Can I go inside of OAuth consent screen?
So OAuth consent screen takes me here. Let me click create OAuth client to see what that is. Okay, I think that might be credential. You see what I'm talking about? It's everywhere.
I don't know what I'm doing at this point. But let's go ahead and create the OAuth client ID because it sounds like something we need. So web application, let's call it node base for authorized JavaScript origins. Let's add localhost and for authorized redirect URLs, there we go. So we are in the correct place.
This is the credential it seems. HTTP localhost 3000 API out callback Google. So make sure you're using the proper protocols here HTTP and click create. There we go. Okay.
Now we have the client ID so let's immediately add that to our dot environment. Google client ID, Google secret, my apologies, Google client secret. And just below we can find the client secret. Here it is. There we go.
And we can click OK. And We're still not done yet. There is one thing we also have to do, which I almost always forgot to do, but this will like create problems in production. I have no idea where to find it. Maybe in audience.
Here it is. Audience. Go inside of audience and click publish app. Your app will be available to any user with a Google account and click confirm. I have no idea why they don't tell you to how to even do this right there there is no flow to follow there are no steps to follow you just kind of have to figure it out.
If you don't do it, people will not be able to use your app. I have no idea why they made it like that. I have no idea why this Google out platform thing is now called like that. Everything feels like it's all over the place. But I think we got what we need.
Okay. And now what we have to do is we have to go back instead of alph.ds, lib alph.ds and let's copy this, add Google and make sure to replace these two with Google. And as always please double check, copy and paste. So Google Client ID, Google Client Secret. There we go.
Let's go ahead and try it now. So maybe this actually won't work as I need it to work for one specific reason. So if I go ahead and set up, I have no idea how to access Prisma. Five, five, five, five, yes. So it might be a good idea to like reset your entire database whenever you do this, simply because I have three users, it seems here.
So I'm just gonna go ahead and delete my users for now. Yeah, I think the problem is if you have the same email, so I've hidden my email here. Usually you would see the email here. I've hidden it because it's my personal email. If you have the same email for your Google account and GitHub account, I think it won't create a completely new account.
It will just link to your existing account. So because of that, try and either use a completely new Google account when testing Google or just delete all users in your database and that should cascade everything. But I just remembered when I click continue with Google I think I have an account that's completely unused here. So let me try. There we go.
Tutorial mailing John Doe. Continue and sign into note base. Looks good so far. No errors being thrown. Let's see, there we go.
It works and if I go inside of my Prisma Studio and just refresh, We should now see a new user called John Doe. There it is. And you can see that when I use OAuth, it gives me a name to the user. But since in our normal register form, we don't have name field, we just use the email. And you can see that we also have the icon for the user.
Amazing, amazing job. So that is now working. We can now officially log in and register with Google and GitHub so you can play around with this. Both should be working. Let me see what it...
Okay, that seems to work too. Great. Everything works. Perfect. Amazing.
So let's see. We added GitHub out, we configured the token in the secret and we did the same with Google out and we added functions to the login screens. Another very simple pull request here. The most complex part was figuring out Google OAuth as usual. So let's create a new branch, 29 GitHub Google Auth.
I'm going to go ahead and stage all of these changes all three of them. OK. 29 github Google alph Let's commit and let's publish the branch. Again, super simple. No need to review in depth really.
So I'm just going to open a pull request, create a pull request, and then I am immediately going to merge it. There we go. And once it is merged, I'm going to go back inside of my main right here and I'm going to click synchronize changes And I'm going to click on OK and I'm going to open my graph just to confirm that I can see 29 GitHub Google Alph. Great. So that marks the end of this chapter and the only thing we have left is to deploy the app.
Amazing job and see you in the next chapter.