 What's up everybody? My name is Tyler Clark and today I want to show you how to add a Google social connection to your OTSR login Head over to OTSR.com and sign in to your account or create a new one if you don't have one already After you've successfully signed in or created a new account You're gonna land on this page and this is the dashboard on the left here We're going to go to applications and then the big orange button create an application I'm going to call my Google auth connection example and then the code that I'll be working with today is a react app And I'm going to do the single-page web app Once that's done creating you'll notice you land on the quick start tab of this This kind of helps us figure out what technology going to work with angular JavaScript react view I'm gonna be working with react and so it's gonna take us to a react login starter code app that we can use This is what I'm going to be using for my app today You click the view on github all you have to do is clone the OTSR react samples and then CD into the sample 01 Once you go and install and get that up and running it's gonna look like this a Basic react sample project with a login button already built in Once you've downloaded that code and you've opened it into your favorite editor of choice Mine is VS code inside the source folder We just need to update some values in the auth underscore config dot json file These are going to be off zero specific to the application that we just created in the dashboard We need to provide at a minimum the client ID and domain in order to get the authentication part working Audience is used if we're going to work with an API So let's go back to our dashboard and grab these two and add it to our file here This is going to be underneath the settings tab. You'll notice the domain and client ID here. So when you copy these over Perfect. Now, there's only one other thing we need to do inside of our OTSR dashboard in order to get our app working correctly So back inside of here on the settings tab still you scroll down. We're gonna look for three different inputs The allowed callback URL allowed you log out URL and the allowed war web origins We're gonna get this from the ports and URL that our app is currently running on which is just gonna be localhost 3000 So I'm gonna grab this value here and I'm going to paste them into these three boxes Save those changes and now we can rerun our server with the new values that we've given inside of the VS code and See where we're at All right, now, let's try this login button And you see that we get the universal login where we enter our email and password only There's not an option to do any kind of social connection like Google which we're trying to do or Twitter or GitHub or anything like that Now if you created a new tenant by default in the beginning of this video You will see the Google connection here as it comes connected by default with test credentials Though since they're just test credentials, you'll want to update those which I'll walk through here in a minute So I am able to log in with a user that I've previously set up within this tenant If I click through here and give permission for this app to access my profile and email I Do successfully log in and you can see that my information is Added to the app and I can view a little about myself from my authentication Now again, the goal is to add Google authentication to that's that login flow So in order to do that, we need to go back to our dashboard and add it to our tenant So on the left here, you're going to see this authentication side with social Click on that and then what we need to do is create a new social connection in our case We're looking for Google. So that's going to be just this Google first tile here on the left As you can imagine the Google social connection allows our users to log into our react app Using their Google profile by default odds are automatically syncs that users profile data with each user login This will ensure that changes made in the connection source are automatically updated in odd zero Now there's two parts of setting this up successfully The first part is going to be in our odd zero dashboard creating the connection And then the second part is going to be in our Google developer account Now if you don't have one you can use your email if you have a gmail to create a new account Once you've created a Google developer account We're going to create a new project and then once we create a project We're going to get some credentials that we need to go back to the odd zero dashboard Inside of the connection and add those credentials there. You can see that instead of my personal Google developer account That's on the console here. I've got a bunch of projects that I've already made in the past In order to create a new project just click on the new project button and give it a good name I'm going to call mine the same name that I gave my application and not zero the Google auth connection video and create Sometimes this takes a little bit to actually create and you'll get a notification in the right side So once your project is done being created go ahead and select that project Now on the projects dashboard, we're going to be looking in the credentials sidebar nav on the left side here click on credentials and Notice that we don't have anything here for OAuth 2.0 client IDs. So we need to create them I'm going to click create credentials and do OAuth client ID Step one is to configure our consent screen Now looking at these types, you need to think about the app that you're working with are you working with internal or external in our case We're gonna be looking for external As you can see here external means available to any test user with a Google account Your app will start in testing mode and will only be available to users you add to the list of test users Once your app is ready to push to production, you may need to verify your app and that's something we'll talk about in a different video Now here we need to put some information about our app Next up is putting in some app information. So I'm going to give this the same name. I've done on the other ones You put your user-supported email in there a app logo if you have it the app's domain for the home page public privacy policy and any terms of service and Then for authorized domains, we do need to put aught zero dot com as This is where the authentication takes place And then also put your contact information here Now I'm not adding any scopes to this project. So I'm going to save and continue and I'm not gonna work with any test users right now. So saving continue Check out the summary page make sure everything looks right and then back to the dashboard With our consent screen created now now, let's go back and try to create those credentials. So again, go to current credentials OAuth client ID Once it's done, we're gonna do application type ours is a web application Give it a name and then we need to add some authorized JavaScript origins and redirect your eyes So for ours, I'm going to add your eye I'm gonna go back to our dashboard and find that application again So again, ours was just called the Google OAuth connection example Going to grab the domain copy that now back inside of here and go HTTPS and paste in that domain Same thing for this redirect your eyes HTTPS slash slash the domain, but I'm also going to add in a login slash call back and save that Perfect. Once that's done, it's going to give us our client ID and client secret Let's go ahead and copy that and then inside of our social connection. Notice that we have the client ID paste that there and Then grab the client secret and also add that here Now as you can see there are a ton of permissions that you can work with with this Google social connection Depending on your app and what information you like from the user. You can add any number one of these Just make sure that you scroll on the bottom and press create Once you do that, you're going to see that you get navigated to a screen where you can individually Enable this connection for each application Remember, I've been naming my Google OAuth connection example. So I'm going to toggle this on for that one All right, let's see the inaction. So head back over to your app. Whatever you're running Remember minds this react sample project We're going to log in and notice that now we have this or connect with Google option So before it was just the email and password. This is the user that I signed up, but let's go ahead and continue with Google Notice the Google modal here or it's asking me for my Google email or phone. I'm going to use a different user for this So when I click next here, it's going to ask for my permission to access my profile and email similar to what happened with the last user I used Tyler to a gmo.com or that's the same information After I click accept or to get redirected back to our app But notice that I'm a different person now and you can even notice inside the description that it's using Google to authenticate So to recap setting up Google social connection inside of your tenant and application is really quite simple Especially if you already have a zero running and working inside of your app and you just want to add in that Google connection Remember, all you need to do is go to your dashboard Create that new connection underneath the authentication tab Go to your Google developer account to create a new project create a consent screen credentials Grab those credentials and paste them back inside of that Google connection And then make sure you enable it specifically for you the application that you want to have this running on and after that Click save and enjoy. I hope you enjoyed this video. Please check out the video notes and links below for more information