 Look, your users do not want to create another password to sign up for your application. You can make a life a lot easier for people who are trying to sign up for your website by letting them sign up with the service that they already created an account with like Twitter. In this video, I'll show you how you can add a Twitter sign-in option for your users using OffZero. Hi everyone, my name is Will. I'm a developer advocate here at OffZero and I don't know about you, but for me personally, the last thing I want to do when I come to a new website is to have to sign up and create another password and another username and try to remember that with all of the other usernames and passwords that I'm already juggling. Now if I absolutely need the service, then I will go ahead and sign up for it and create another username and password. But if I don't actually need it, I'll usually just click the X and keep it moving. So when I see that there's an option for me to sign up for a new service using an account that I already have with the service I'm already familiar with, for example, Google, Facebook, Twitter or even Instagram, I'm more likely to actually click and sign in for that service because the experience is a lot more seamless. And as a developer, you have the power to make this seamless experience available in your application and OffZero makes that a whole lot easier for you to implement. So in this video, we're going to add a sign in with Twitter button to an application. In order to complete this tutorial, you will need two things. First thing you need is a free OffZero account. You can sign up for one in the description and you also need a Twitter developer account which is also free. Now in order to get access to the proper endpoints, you will need elevated access to the Twitter account which is free and you can sign up through the developer portal and it usually takes a few minutes to get approved for the elevated access. So now let's head to the OffZero dashboard so we can get started. When you log into OffZero, you'll be met here with the OffZero dashboard on the Getting Started page. If this is your first sign with OffZero, you have to create a tenant first and this is where all your applications will be held. So let's go to Applications, Applications to create our application to use for this demo. Then we're going to click Create Application and then we're going to name it. So I'm going to say Twitter OffZero demo and make sure Twitter is spelled right. Then I will go to Single Page, Web Applications because I'm going to make this a React application and then I'm going to click Create. So when you first create application, it's going to bring you to a quick start that will ask you what technology are you using for your web app. I'm going to select React and it will give you two options. You want to integrate with your own app or you want to explore in sample app. To save time on this tutorial, we're going to explore a sample app. So I'm going to actually download the sample. When you click on Download Sample, it will show you some settings that you need to configure in your OffZero account to link your application to OffZero. So OffZero knows where your application is coming from and where to redirect your application to after OffZero handles the authentication process. So let's click Download Sample and this will download as a zip file. Before we get to the zip file, let's copy this localhost 3000 and actually visit the application settings and configure those values that it wants to configure. So let's scroll down on our settings, paste in localhost 3000 to allow callback URLs, allow logout URLs, and allow the web origins. And let's scroll down and click Save Changes. So here I've downloaded and extracted the sample application and I've opened it up in VS Code. Now this sample application is already configured with OffZero with the login and the logout process. If you want to learn how to configure this application yourself instead of using the sample app, you can visit the OffZero developer resources. Developer resources has guides that will walk you step by step on how to implement OffZero into your application with the tech stack of your choice. Alright, so now back to our application. Let's go to the source file. Inside the source file, there will be an offconfig.json. Inside the offconfig.json, there is the domain value and the client ID value. Both these values are prefilled out for you. And these values are obtained from the settings page of the application in the OffZero dashboard. These values get pre-populated when you download a sample application from the OffZero dashboard. There's also a value for audience, but we're not going to use that, so we will cut that out and make sure that you hit save. So the next thing we're going to do is head down to the terminal and hit NPM install to install all the NPM packages. And while that's doing this thing, I'm going to come back to the video when it's done. Now that everything is installed, we should be able to run the application. So we're going to do NPM run SPA for a single page application that'll just run the React portion of the application. So as we see, we're on localhost 3000. We already have a React sample project that is already configured with OffZero. So just to see how everything works, we're going to click log in. We'll get redirected to the OffZero universal login page. And then I will log in with my email and password. I will ask if I want to authorize the app and then we'll click accept. Now, if you don't have a user already, then you will need to create a user and do that by signing up instead of logging in. And then you see I have my profile picture here. And if you click on the profile, there's actually some metadata, including the nickname, a name, the URL for the picture, email address. If the email address is verified and all of those type of things. So now I'm going to log out of the application and it will bring us back to this home screen. So now let's go back to the OffZero dashboard. So now let's actually set up the Twitter connection. So let's go to authentication, social. Then I'll bring up the social connections page. Then in the upper right, we'll click create connection. And then we'll scroll down to Twitter. Then it's to tell you what Twitter will need access to. Click continue. And then on the bottom right, we'll have a little tutorial. I will cut that out and then we will do the setup. On the new Twitter social connection page, you need a consumer API key as well as a consumer secret key. We actually get those from the project that we create in the Twitter developer portal. So let's head there now. Okay, you can get to the Twitter developer portal by going to developer.twitter.com. And then we click on the developer portal. I'm already signed in, so I'm good to go. Okay, so in the dashboard of the Twitter developer portal. So the first thing you need to do is actually create a project. So we'll give it the name of OffZero Twitter demo. And we will click next use case. I'm just exploring the API. Then for the product description, Twitter login with OffZero. So what I'm going to put, and then we'll put for development. And then after the product is created, it will ask us to create an app. So we'll get an app name OffZero Twitter Toot. So here we will get the API key and as well as the API secret. And you can copy both of these values and paste them back over on your OffZero account. On the Twitter developer portal, go down to the set of your app and click on enable third party authentication. Scroll down to where it says user authentication settings and then click setup. Then on the user authentication settings page, go down to type of app and click on web app. Then you go down here to app info and app info, it'll ask for a callback URI and redirect URL. And here you put your OffZero domain slash login slash callback. And remember, if you need to get access to your OffZero domain, it's available in the settings for your application. It also needs a website URL and this would just be your OffZero domain. So all of that configured, let's scroll down and make sure that we hit save. This will show you the your OAuth 2.0 client ID and your client secret. So let's go back to OffZero dashboard and we're on the new Twitter social connection page. Make sure that we click create. And then it will ask you for the applications that you want to use for this connection. And I'm going to scroll down to our Twitter OffZero demo application and enable it there. Now that the Twitter social connection is enabled in our application, let's go back to our sample application. All right, so we're back on the sample application. Let's click login. And now you see we have a new option for as continue with Twitter. So instead of entering my email and trying to remember my password again, I can just click continue with Twitter. It'll ask you to authorize the app. And then you'll get redirected back to that application. You want to accept that this application has access to your profile and email. Click accept. And now I am logged in with my Twitter profile. And if you click on the profile, you see it has some information from my Twitter profile like my nickname, my name, and even the URL of where my avatar is stored. All right, so I'm going to log out. All right, so that's it. You're able to use off zero to add a Twitter social login to a react application. Now remember, if you're not using react, you can use our quick starts with the technology of your choice to get started with application. If you don't want to use a starter application, you can go to off zero developer resources and take one of our guides that will show you how to incorporate off zero with the technology of your choice. Thank you so much for watching this video. And if you have any questions, make sure you leave a comment and we will be sure to answer it as soon as we can. Thank you so much. See you next time.