Next.js & Identity (auth) Tutorial #2 - Installing Identity & Deploying

Key Takeaways

all right then so we've got our site up and running and we can see in a browser we can preview that the next step is to work with netlify identity so install a package into our project and then hook it up with netlify for that to work so before we do that i just wanted to point out one thing in the starter site i made an error on this import right here it shouldn't be a capital l for link it should be lowercase when we import it and then just uppercase when we use the component that was in the navbar now i've updated the starter files so when you use them you shouldn't see this don't worry about that i just wanted to point it out because i did show you this component as well in the last lecture anyway now we've done that let's install the netlify identity package in this project for it to work so the way we do that is using npm and i'm going to do that in a terminal down below so npm install then it's netlify hyphen identity hyphen widget so just press enter to install this package [Music] all right then so now we've installed that package the next thing we need to do is enable the identity service for our project on netlify now that's quite hard to do at the minute because we've not yet deployed this site to netlify it doesn't exist on netflix yet so that's what we need to do first of all and to do this we're going to be using continuous deployment with github now if you know nothing about github or git at this point it would be a good time to maybe go and check out my tutorial series all about git and github the link to that is going to be down below in the video description then come back otherwise a lot of this stuff might go over your head so the first step is to create a github repository so head to github and create a new repository i'm going to call this gaming hyphen vibes and then down here this can be public or private it really doesn't matter and then click on create repository so it's going to create this repo for us then next we need to grab this line down here so we can set the origin of our local repository so to do that i'm going to open up the terminal and i'm going to paste this in so git remote add origin then the repo we just created press enter to add this and then once we've done that i'm going to say git status just to check that we're on the main branch which we are then i'm going to say git add just to add that little change i made to the nav bar a minute ago so git add and then i'm going to say git commit and then a message and this message is going to be initial commit like so press enter and then i'm going to push it up to the main branch so origin main like so so once we've done that hopefully over here if we refresh now we should be able to see that project which we can awesome so we have this project on github now the next step is to allow netlify to bring this in and deploy this site for us so in order to do that first of all head to netlify.com and sign up for a free account once you've done that you're going to go to your dashboard and from here click on sites so we want to create a new site from git so click on that button and then click on the github button down here now the first time you do this it's going to ask you to allow netlify access to your github account just give it access i've already done that and then down here it's going to list all of your repos search for the one you just created i called it gaming vibes so i'll search for gaming and then click on this repo now make sure this is set to main that means that it's going to take the main branch from our repo build that project and deploy it down here you can keep the build command the same and the publish directory the same just click on deploy site now if this is the first time you're deploying this next application you might get a build area down here but if you do it's probably because the plugins over here doesn't have essential next.js installed this is required on netlify for any next js project now automatically it should install this plugin but if it doesn't just click on this button right here search for the plugin and click on the button to install it then try deploying again by going to deploys and trigger deploy and deploy site right here but hopefully it should work straight off all right cool so we can see that mine's published so everything's worked and i'm gonna now go to identity this is where we enable identity for this site so just click on this right here enabling identity and now if we go to settings and usage you can see all of the different settings for your identity service so how people register the different external providers you can use etc now we will be looking at a lot of these settings in the future but for now we can leave everything as is so now we have the identity package installed on the front end and we also have identity enabled on our project right here where we deployed it so now in the next video what we're going to do is start to use the identity package in our project so we can communicate with netlify in order to authenticate users all right but before we do that i want to do one more thing i want to go to site overview and then site settings and i just want to change the site name right here so click on this button and i'm going to call it gaming iphone vibes like so and i'm going to save that let's see if it works yep that's available cool so now if we go to site overview we can see this is the url for our site if i click on this we should see now this project deployed on netlify at this web address i can go to guides that works home that works awesome