AUTHENTICATION made EASY with NextJS 13 and Firebase

have you ever had an app idea that you know will  grow to the Moon solve The World's problems fill   up your bank account or even retire early there's  always one annoying thing you have to do in every   single app authentication if it's so fundamental  to everything why is it such a pain to do I'm   here to show you with some great tooling it  doesn't have to be a pain anymore by the end   of this video we're going to have authentication  fully set up so you can log in with Google our   Tech stack is going to be next js13 next off and  Firebase let's Dive Right In first let's pull up   our next JS documentation and copy the command on  the home page to set up our project let's pull up   a terminal copy that command to create our project  I'm going to accept all the defaults once you   get through all that it'll start installing your  Project's dependencies to create the project open   up vs code or whatever IDE you like you can see  it generated a sample project for us let's pull up   the readme to see how to run our app locally copy  and paste the npm Run Dev command in a terminal then in a browser hit localhost 3000 and there  we have it our app is running locally now   let's start installing next off which is  our authentication Library so pull up the   next off docs click on get started  and copy the install command into   our terminal so that we can add  it as a dependency in our project let's go back to the next off documentation and  finish configuring it next auth requires a file   to exist in your project at the path Pages API  off and then a file called next off and since   we're using typescript we'll have the suffix b.ts  let's create that file and copy this code into it   the sample code is set up to use GitHub as a  provider next off has two cool features providers   and adapters providers are used to authenticate a  user with a particular provider in our case Google   but they support a ton adapters allow you to store  the user profile and session information into a   database of your choice today we're not going to  be doing anything with databases so we're going   to skip over adapters if you want to hear more on  adapters let us know in the comments down below   back to the next auth documentation in  the side menu click on providers and   scroll down to Google this is all the  information you need to configure the   Google provider the configuration section  tells us how to configure Google to call   back to our application once a user has  logged in we'll need this later when we   set up Firebase let's copy the example code  into our next off TS file in place of GitHub we are referencing two environment  variables Google client ID and   Google client secret let's create a DOT  env.local file and stub them out for now nextdoth also expects two environment  variables as well next off URL so it   knows where the base URL of your app is  and next off secret to encrypt the jot   token after successful authentication now  let's go ahead and create a login component   I'm using a vs code plugin to generate a  component stub now's a good time to share   an update with nexjs13 there are server side and  client-side components a server-side component   is a component that is fully rendered before it  is loaded in your browser a client-side rendered   component is rendered in your browser at page  load time server-side components are the default   index.js unless you put use client at the top of  your component file generally you want to have a   client-side component whenever you want to have a  user interaction on your page like a button click   back on our login page let's add use client at the  top since we'll have a button click on this page add the button with a click event using  next auth sign in function and import it   next we're going to open up the home page and  delete all the HTML since we'll be adding a   log out button let's add the use client at the  top then import next auth's sign out function   and the use session function to get the currently  authenticated user now let's create a variable to   get the current user session then let's show the  user's name we'll be making sure this route is   only accessible if the user is signed in so we can  assume the user will be logged in and has a name   and lastly We'll add a logout button next provides  a server-side wrapper around your application   called the session provider and this allows you to  access the user's session data we'll need to wrap   it and make sure the session is also available for  our client-side rendered components as well now   let's create a file called the session provider  add use client at the top since we're creating   this for our client-side components import next  off session and session provider then let's add   prop so we have some type safety and finally  wrap all of our rendered components inside the   provider tag the last bit of coding we need to do  is to open up our layout file and use our session   provider to show the login component or the home  page depending on if the user is logged in since   the Page's server side rendered instead of using  get session we need to use the get server session   and passed in the next auth configuration then  add the session provider and pass in the session   if the session doesn't exist show the login  component otherwise show the home page component since the get server session call is asynchronous  we also need to make our root layout async   the last thing we need to do is set up  Firebase so that we can support Google   sign in let's go to firebase.com and create a  new project I'll call myrific authentication   I'm going to turn off Google analytics and  click create once your project is created   it'll navigate you to the Firebase home screen for  your project click on build in the side menu then   authentication click on get started you'll  see all of the different providers Firebase   supports today we'll just be using Google  click on Google and hit the enable toggle   button enter in a public-facing name it can  be anything and an email address and hit save   open up the Google provider and click on the  web SDK configuration drop down now let's copy   both the client ID and secret and paste them  into our env.localfile we stubbed out earlier   the last step is to tell Google to route back  to your application after successful sign in   to do that click on the settings menu and click  project settings click on the service account Tab   and click manage service account permissions this  will take you to Google cloud in the search bar   at the top search API and session credentials  and click on it once there click on oauth 2.0   client IDs for authorized JavaScript Origins  add our local next JS URL localhost Colin 3000   and then for authorized redirect Uris add the  Callback URL that we were given in the next auth   documentation earlier in this tutorial click  save and let's switch over to our terminal to   ensure our app is still running looks like it is  so let's pull up our app in the browser click the   login button log in with our Google credentials  and as you can see there's my name and a log   out button if we click log out it should route  us back to the home page and there you have it   we set up authentication with Google in less than  six minutes there's also plenty of other toolkits   out there to help make authentication easy if you  like seeing this coding tutorial in six minutes or   less let us know by hitting that like button and  subscribing if you want more next JS or Firebase   content let us know down in the comments below I'm  Jim Becker from rific and we'll see you next time

Channel: Rifik

Views: 2,613

Keywords: next js, nextjs, next js 13, next js tutorial, firebase tutorial, firebase, javascript, authentication in react js, authentication, software development, software engineering, react js, tutorial, software development engineer, nextjs 13 authentication, next js 13 tutorial, software, software engineer

Id: zrjybW3UKr8

Length: 7min 0sec (420 seconds)

Published: Fri Jun 02 2023