How to connect LinkedIn to your React App - Serverless SaaS Build Series 2.8

do you want to learn how you can add linkedin sign up to your react app well in this video that is exactly what i'm going to show you how to do [Music] hi guys my name is sam with complete coding but our aim is to make you into the best developer that you can be in this week's video we're going to be looking at how we've added the linkedin connection process to our react sign up this involves sending the user to linkedin where they can log in and then say that they are giving permission to the post planning guru app to create posts on their behalf this is part of a wider sign up process that we're going to be going through which includes creating new users as well as creating new companies and the relationship between a user and a company so let's jump into the code and see how we've done all of that now that we're in the code we can look at the changes that have been made since last week if we scroll down inside app.tsx to our actual react code we can see that before there were just the sign in route but now we have some extra routes this is required for the registration or sign up process and the first of those is a register path and if we look at our app that is triggered by clicking on the register button that opens up a screen that has the name email address and a password for users to create a new account as we've done before in the sign in we have the ability inside the password to show or hide the password if the user wants and as always we have the color switching as well once the user has filled out all of the details and hit next if we look at our code and look inside the actual register function then the next button gets called and triggers the register function if we scroll up to where that is defined here we're again using the auth method from amplify but this time using sign up that takes a username and a password and because we've added the name as an attribute when we created our cognito user pool back when we're creating our apis we can also pass in a name with all of that set up and if that then it succeeds what we actually want to do is send the email address back up into the root of our app so that it can be passed into the login so you don't have to repeat your email address multiple times after that's all succeeded we push the verify route to the history which will redirect the page through the router to the verify page inside here we can look at verify code and there is actually two ways of getting to this either you can create a new account and hit next or if you've created the account but didn't confirm the verification code then you can come back later and click on i have a verification code which will take you to this page now the reason we have to do this is because incognito we said that we need to validate that the email is valid and we want them to actually receive an email with a code to confirm that the email address is actually theirs so here they can either enter their email address again or if they've come straight from the registration process that will actually be pre-populated they then just put in the verification code and hit next if this all succeeds we'll have a look at the code we have this function called confirm code which gets called and all we need to do is pass in the email address and the code they have supplied if those code matches the email address incognito then this will succeed and we are going to redirect them to the sign in page if it doesn't succeed there are a couple of reasons that that could have happened the first is the code could have expired they could have waited too long i think it's 24 hours you have to enter the code in which case there'll be the an error of expired code exception and what i've actually done is added a set code expired equals true and that will actually trigger a new button to be rendered which will get a new code and that triggers a resend code function which again in auth asks us to pass in the email and resends the code to the user's email so that's what happens if the code is expired but there is also the case where for some reason they've already entered the code and with here we get a not authorized exception which is basically saying they've already confirmed the code why are they on this page in which case i redirect them to sign in and from the user side of things they don't know the difference between verifying a new code and this exception so that's all going to happen and they're going to get redirected to the sign-in and that's where we get on to the next stage of the sign up process once they've signed in using the existing sign-in page that we made in the last video it will update the logged-in state so instead of getting this set of switch and routes we get a second set in here i've decided to change things up and clean things up a little bit instead of having all of the routes inside this app.tsx i've actually moved all of the routes into their own routing group components this just keeps this app a little bit cleaner and in the future i may actually switch the unlogged in routes to work in the same way because it actually works quite nicely so if i go into components and routing groups i have a signed in route group and this does a couple of things so when you've logged in it gets the selected company which we talked about in the last video which by default will be the first company that is associated with the with the user when they log in and there's a couple of scenarios here the first scenario is that the company isn't selected or in this case there isn't actually any companies on the user and that's kind of what we expect when you first log in we expect there to be no companies so what i've done is i've created a create company component and i'll show you how that looks so if i go to login and i log in with a test email address that i've added and gets the password i log in and here we get to a screen where it's asking us to create a profile to be able to connect that to linkedin i've decided to call these profiles in the app because not everybody's going to make have a lot of sense calling them companies because most of the time you're going to have users who just use this for themselves so in here we have the ability to add a profile so i'm going to call this sam's personal linkedin and if i hit connect to linkedin it's actually going to redirect me to linkedin now let's jump into the code and see what's actually going on there inside create company we have the profile name which is what we were entered and then we have the input of connect to linkedin which calls the create company function in here the first thing that we need to do is actually call a graphql api saying create company now when i did this at first i didn't realize that actually i needed to add an extra step to our api because when i originally created the create company endpoint in appsync it did create the company the issue was that it didn't create the relationship between the company and my user so when i did a get my user i still had no company on my profile so once i'd figured that out i actually had to go into the api into our serverless and appsync api and i changed the create company into a pipeline resolver this is different because we need to do two steps we need to create the company and then based on that company id we need to connect the company to the user using the relationships table so if i actually find that in here create company and is going to do well exactly what you'd expect is going to pass in the owner id of identity dot username and the company name is going to be set to arguments dot company name which is the profile i've passed up from the app this then gets passed into the connect company to user request and here we can get the company from the previous response in the pipeline and then here we can set the company id on the relationship to be that company dot company id we can also set relationships and the user id as well as the user relationship so that the admin is the username and this user works for the company id that's just a little change i had to do inside my appsync to get this working but if we go back to our api now and find the create company so now that we've updated that in appsync this create company is not only going to create the company but it's also going to create the relationship saying that this user is working for that company so that when we do a get my user we'll have this company listed so now that we've created that company we need to do the linkedin verification process now this is something we proved right at the start when we did our proof of concept and the way that we do that is we basically redirect the user to a linkedin url so this is linkedin authorization url then we have we're asking for a code as a response we have our client id which we've got from the linkedin developer console and then we have the redirect uri which is where the linkedin will send the user once they have confirmed that they want us to be able to post on their behalf now the reason i've done a different one for localhost dev integration and production is that that redirect uri is going to change when i'm running this app locally i want to set the redirect uri to be localhost 3000 slash auth linkedin callback when i'm running it in dev i want it to be dev.example.com and i'm going to update this value to be something like dev.postplanningguru.com once we've registered that domain name and have this set up and deployed to the dev environment likewise when we actually get to running this in production the prod url will probably just be postplanningguru.com auth linkedin callback as well as that we have the scope which is our light profile which allows us to get the name of and the id of the user as well as the write member social which allows us to post on their behalf so now that we have those urls all we want to do is redirect the window location to be the localhost version in the future i'll have to add some logic here so that the url that we're choosing is dependent on the url that we're on so if we're running it locally use localhost if we're running in dev then use the dev one obviously in production use the production url and that's what we actually see here i've been redirected to linkedin and i've been asked to enter my email address my password and if i now click sign in that's going to ask me if post planning guru is allowed to use your name and photo which comes from the r profile lite but also create modify and delete posts and comments on your behalf so this is the key to basically the whole way working of this post planning guru so when we click on allow that will actually redirect us back to our app and it says it's syncing with linkedin where this is actually behind the scenes saving the linkedin code that we got in the url so let's have a look at how we do that inside here we get redirected to auth linkedin callback and if we go into this linkedin code component we can get the query string parameters from the window location and then get the linkedin code from there with that linkedin code we can then save that code as soon as we get onto the page we just need to call the linkedin set company linkedin code which is a mutation we created as part of our id part of our api with the linkedin code and the company id once it's saved we can set saved equals true and if we want we can add a button to allow them to fast skip and that will just save them five seconds of waiting and the reason i've added this five second delay in is because i want there to be two separate messages when they first get onto the page i want them to see we're just saving your details they will send you to the home page soon and then once it has saved just say thank you that's all worked you'll shortly be sent to the home page if they really want to skip the five seconds of waiting the is that there is a button at the bottom saying go to home page and what this will do is it will just redirect them to the home page and also this is disabled until fast skip is enabled where which happens once the actual code has been saved to our api what this will do is if we go back into our signed in routing now the linkedin code on the selected company will actually be valid therefore we're going to skip this whole switch statement and we move on to our base and our main routing section here we have posts and by default uh if they go to the just home page which is forward slash we'd redirect them to the posts as that is where we want them to be so that is everything and as you can see i got redirected to the posts page but kind of as you'd expect there aren't any posts on this company i think i'm going to add some default message saying if there aren't any posts have some message here telling them either how to create some posts or how the app works just to like introduce and welcome the new users but yeah that's for another video in this video we've done quite a few things we've moved our routing around so that we have isolated the routing for when a user is logged in compared to when they are not we've then created a sign up page which leads the user to then have to create a company or a profile for which they want to post when they create that profile we then check if they've already signed up with linkedin and if they haven't we ask them to go to linkedin redirect them they can then sign in and verify that they want post planning guru to create posts on their behalf after all of that they're now fully set up and can start creating posts can start scheduling them and start really getting into the functionality of the app in next week's video what we're going to be looking at is how we actually create new posts so the user interface for creating as well as updating and deleting posts so thank you for watching this video and i'll see you next week

Channel: Complete Coding

Views: 229

Keywords: AWS, serverless, Serverless Framework, NodeJS

Id: dmzC2M6u-6Q

Length: 20min 36sec (1236 seconds)

Published: Thu Jul 01 2021