So now let's go ahead and let's enable Google login because currently clicking on Google does nothing. So let's take a look at the documentation on Auth.js. So we have some resources here if you want to read them but what we are interested in is these two the Auth.googleid and Auth.googlesecret. So go ahead and add them inside of your .environment.local. So if you want to you can separate the auth and just add these two so it's more readable.
And now let's also add one more thing by going inside of our auth where we have the github so it's right here in source auth and go ahead and now add Google and you can add it in the array after github like this. Now we have to find a way to fill these values here. We're also going to need this callback so don't close the page. Instead, go to Google and Google Cloud Console like this. And go ahead and click on the first link and you should see a screen similar to this.
Now go ahead and click on this drop-down and select a new project and inside of here you can go ahead and create a new project. So I'm gonna call this new project and let's just click create And now just wait a second for this new project to be created and after it's been created you will get an option to select the project like this. So click select project on your new project and you can confirm in the drop down that it's been selected. Now go ahead and click open search and inside of here you can search for APIs and services like this and click on this option right here. Now inside of APIs and services first things first let's go ahead and let's create an OAuth consent screen.
We're going to select external and click create. Give your app a name. So I'm going to go ahead and call this image AI. And I'm going to select the user support email. And here's a quick tip.
If you don't have to fill in the app logo or the app domain here, the only thing you actually have to fill is the developer contact information. But if you decide to fill these things like app logo, especially app logo, you're gonna need to pass through authorization once this goes into public mode. So right now you are in test mode, but if you wanna use this in real world, you're going to have to go through authorization, which can take some days to pass. You can see here, after you upload the logo, you will need to submit your app for verification. So that's one thing that you might want to skip because if you don't have a logo it's instant so it will instantly be enabled and now just click save and continue so just make sure you've entered the developer contact information and selected these two fields here click save and continue Now inside of here we have some scopes you don't have to select anything here so just click save and continue and you don't have to add any test users so you just need the most basic OAuth consent screen and with those few fields filled.
Great so now let me just zoom out a bit and now we have to go inside of credentials right here and you're gonna click create credentials and you're gonna click on OAuth client ID here. Let's wait a second for this to load. Go ahead and select web application. You can give this any name. I'm going to call this image AI like this.
And now for the authorized JavaScript origins, let's go ahead and let's add localhost 3000. Let's see if we are allowed to add that. Looks like we are. Great. And for the authorized redirect URLs we have to provide a callback.
So now you want to go inside of autojs Google here and copy this extension right here. So that's going to be the callback. So let me go back inside of the AuthorizeDedirect URLs. So add this like that and click create. There we go.
Now we have the client ID which I can copy here and I have the client secret which I can also copy here. And let's click OK. And I think that that should be it. So let's go ahead and try this out. I'm going to go ahead and I'm going to attempt to, first of all, refresh.
Make sure you've added Google inside of your providers. Make sure you don't have any misspellings without Google ID and out Google secret. And here's a quick tip. Open your terminal so that you can notice any errors if they appear. So I'm going to go ahead and try and log in with Google.
And there we go. I have an option to sign in to Image AI using my email. I'm going to click continue and let's see if that will actually create a new account or not. You are logged in. Great and let's go ahead and open Bun Run Database Studio.
So this will open my Drizzle Studio here, and I should now have two accounts, right? There we go. So you can see that one is from Google and the other one is from GitHub. And I also have two users. Amazing.
Great, great job.