Building with Next.js and Prisma: Passwordless Authentication with next-auth

Aug 15, 2023

Building with Next.js and Prisma: Passwordless Authentication with next-auth

In this live coding session, we are going to learn how to implement passwordless authentication mechanism with Next.js and Prisma, using the fantastic next-auth library.

To follow along, clone this repo and switch to start-here branch: https://github.com/hexrcs/prisma-next…

Learn more about Prisma:
◭ Website: https://www.prisma.io
◭ Docs: https://www.prisma.io/docs
◭ Quickstart: https://www.prisma.io/docs/getting-st…

Subtitles for this video have been professionally transcribed. Prisma can provide the subtitles for your tech video as well - get in touch with us at [email protected].

Content

1.839 -> hi

4.72 -> hi folks

8.88 -> i think we are live

24.64 -> so

28.96 -> um can anyone see what's going on here

32.8 -> anybody watching now

36.96 -> all right let's get started so in this

39.68 -> stream

40.239 -> i'm going to show you how to uh

42.84 -> implement

44 -> passwordless authentication in your

47.039 -> next.js app

49.2 -> so i'm going to

52.48 -> post a comment in the

56.84 -> um

60.239 -> uh under underneath the video and this

63.199 -> is the

66.08 -> starter repo and you can clone it and

69.439 -> follow along from here

75.92 -> so just to walk you a little bit through

79.36 -> what we're going to do we have a very

82.64 -> simple

83.92 -> uh basically just one

88.64 -> uh dumb component and we're going to

91.6 -> hide this

92.24 -> in uh behind a authentication

95.92 -> authentication page

98.96 -> so uh let's get started so

102.479 -> what we have right now is a

105.84 -> next.js application setup we got a bunch

108.799 -> of dependencies

110.159 -> all the essential dependencies i'm going

111.92 -> to use typescript here

114.479 -> hey

118.56 -> and the first step is going to where

121.28 -> we're going to

122.079 -> install the next auth module

125.6 -> because we're going to use next auth

130.879 -> this will be a dependency so

134.319 -> normal dependencies so let's get it

140.84 -> installed

154.84 -> um

156.72 -> okay i think i gotta hide this oh

160.4 -> that's weird

163.44 -> oh yes code just crashed um

169.599 -> one second

173.76 -> okay

180.48 -> all right so uh from here we're going to

183.92 -> uh

184.319 -> install up next the prisma dependency

187.28 -> this is

188 -> this is going to be dev dependency

191.12 -> and actually we're going to install the

193.28 -> prismacli

196.84 -> and

198.8 -> also the type definitions

202 -> i can't type anymore type definition for

205.12 -> next auth

210.159 -> and then we're going to use the cli to

214 -> bootstrap uh a starter

217.599 -> prisma file prisma schema file

222.159 -> now one thing to notice is that i have a

225.12 -> postgres database running in the

226.72 -> background

228.08 -> and

232.319 -> and you'll need to have some sort of

234.959 -> database

235.599 -> running i have postgres and prisma has

239.12 -> a great support for postgres and you can

241.84 -> also

242.319 -> try sickle white

246.08 -> but in this demo i'm going to use

248.959 -> postgres

250.239 -> so let's

255.439 -> let's run mpx prisma

259.759 -> in it and this will create

265.36 -> a sample here and this is a

269.44 -> completely empty schema file

272.479 -> and you should have something like this

275.6 -> a database url that that's formatted

278.479 -> like this

280.84 -> um so

287.04 -> i'm a little bit nervous um

291.36 -> so uh for next auth to work

295.36 -> we'll need to have a bunch of models

298.4 -> in our database to store the user

300.72 -> information

301.84 -> and also also the tokens

305.28 -> and active sessions uh

308.479 -> so for that we're going to create a

311.12 -> bunch of models

314.16 -> and

317.52 -> these are pretty much standard and

321.68 -> you have to structure the models this

323.919 -> way

328.08 -> we increment and we'll mark it as an id

333.52 -> and also we'll need also

337.12 -> user

341.68 -> and also

347.36 -> session

351.039 -> and also last one is

354.639 -> authentication uh verification request

357.68 -> verification request

362.56 -> hi everyone um

366.16 -> and in fact i have uh i have the

370.639 -> schema file already prepared in advance

377.6 -> and just

382.88 -> i'm just going to copy and paste

384.96 -> everything

385.919 -> uh into here and

390.08 -> walk you through what's happening here

392.84 -> so oh

394.4 -> where's my mouse so

397.68 -> uh we're doing here is that uh we're

400.16 -> mapping the prisma models

402 -> uh prisma field names

405.919 -> to the column names in a database

409.52 -> using the map attribute and

416.319 -> the model should look like this

419.759 -> and you can actually find uh

423.039 -> find this sample in the uh

426.319 -> in the readme of the github repo that i

428.96 -> just linked in the chat

431.36 -> and uh this is pretty much standard for

435.199 -> next auth to work and in fact you can

437.599 -> also extend this

439.039 -> if you want to we're implementing

442 -> passwordless authentication but

444 -> if you really do want to store your

446.319 -> password

447.12 -> you can customize that as well but i'm

450 -> not going to

450.72 -> show you that here um just know

454.08 -> that you can uh

457.52 -> so for

460.56 -> and now we have have the schema ready

464 -> we're going to use uh

467.28 -> prisma migrate

470.319 -> save

473.44 -> and this is experimental right now

478.24 -> to because we have an empty database

482.4 -> so we're going to create the tables that

486.4 -> that we need in the database using the

489.039 -> migrate

489.759 -> prisma migrate and i'm just going to

492.56 -> leave the name of the migration to empty

495.12 -> and afterward after hitting enter you

497.199 -> can see

498.16 -> that we have a migrations folder created

501.12 -> underneath the prisma

503.199 -> directory and here you can see

506.479 -> a readme file that documents the

508.96 -> equivalent sql commands

511.68 -> now that is generated from our

515.36 -> prisma schema based on the models that

518.32 -> we wrote

521.44 -> and uh

524.64 -> um yeah so

528.399 -> so the migrations should also be

531.2 -> committed

532.08 -> uh to your uh to a git repository

535.839 -> um but the info

539.279 -> of course shouldn't be um

544.64 -> and so uh

548.88 -> so now we have the migration saved and

550.959 -> we're going to push them

552.24 -> push the let's go push the migration to

556.16 -> to the database so

560.839 -> prisma

565.2 -> also experimental

570.32 -> and this just works because i

573.44 -> secretly predefined my uh

576.56 -> my database credentials to be the same

579.6 -> as the

580.8 -> uh as the dummy file basically i have a

583.68 -> user called

584.32 -> john doe and random password called

586.64 -> random password

587.839 -> running on my localhost so if you have

591.44 -> a database that's located or um

594.959 -> or is actually accessible from from

597.92 -> another

599.04 -> url you should of course change this

605.04 -> so now we have everything in a database

607.92 -> we're going to

608.72 -> run mpx prisma generates

612.24 -> and this is going to generate for

616.72 -> this is for generating the prisma client

620.32 -> into our node modules so later on if we

623.68 -> want to continue adding stuff to

626.72 -> to our schema here because

630 -> we only have the authentication here

634.88 -> for example you're building a web shop

636.72 -> you might want to have the

638.88 -> because uh like the orders and also

643.04 -> the items you can

646.24 -> extend your schema here

650.959 -> and uh yeah this is actually pretty much

655.68 -> with uh with the christmas client setup

659.839 -> and if you

660.959 -> are curious we can also go to christmas

664.24 -> studio

665.519 -> this is a pretty cool

669.6 -> visualization tool that is a

673.76 -> database browser you can see that we

676.64 -> have

677.279 -> completely empty

680.56 -> database here and this is pretty cool

686.079 -> so let's switch back to visual studio

689.6 -> code

691.44 -> and um

694.959 -> so now we're going to configurate next

698.24 -> off so for next auth to work we'll need

702.48 -> to

702.88 -> have um an api route

707.36 -> this can be whatever uh i'm i'm going to

710.16 -> call it

710.72 -> off but this uh this

713.92 -> route has to have a

720.079 -> dynamic rod or or maybe you want to

722.959 -> think of

723.68 -> it as a catch-all uh route

727.04 -> i'm just going to call it next auth

730.639 -> dot ts this is uh this route here this

733.839 -> api route here is going to

735.92 -> receive all the uh all the requests sent

739.2 -> to

740.8 -> your host name then slash api slash auth

745.04 -> so uh so

748.32 -> all the so all the

754.32 -> the authentication page and also all the

757.36 -> callbacks and everything will be

759.12 -> automatically handled by a next auth

763.279 -> and before we write anything here we're

766.56 -> going to define

767.76 -> some environmental variables

771.36 -> i'm just going to comment out this first

773.6 -> line here because i'm

774.72 -> not going to deploy it to production yet

779.04 -> so for the secret it's uh it's going to

782.48 -> be

783.44 -> a key that random key that we want to

785.92 -> encrypt

786.88 -> and sign the cookies and tokens

790.959 -> and we are going to implement uh the

793.68 -> email signup

795.2 -> and also github oauth signup

798.56 -> so for the email to work will have to

801.44 -> have

802.48 -> smtp uh host and smtp server

806.24 -> and of course the host name port number

809.279 -> and also the user and password if you're

811.76 -> using something like

813.36 -> male gun or mailchimp or percent grid or

817.68 -> amazon ses

821.36 -> you might have some something different

824.959 -> than a traditional smtp

828.24 -> email user password pair you'll probably

831.36 -> get something like an api key or

832.959 -> something but

834 -> it's basically equivalent to this

838.399 -> and you can just pay them paste them

840.839 -> here there should be document

843.12 -> documentation on how to

846.24 -> programmatically send emails using

849.92 -> third-party services but

853.68 -> yeah so for the github secret

856.88 -> um we are going to

860.8 -> create a new github application

868.72 -> if you go to your settings

873.04 -> then head to developer settings

876.24 -> you can find oauth apps and

879.76 -> i'm going to create a new application

883.519 -> let's call it how convenient

887.92 -> and uh yeah so

891.04 -> i'm going to call it prisma next os demo

893.92 -> and

894.88 -> for the authentication callback url this

897.68 -> one

898.8 -> uh has to be the

903.04 -> catch all that we define just defined

906.8 -> uh so basically i i call it api slash

910 -> auth

910.56 -> so this will correspond to api slash

912.88 -> auth and one thing to notice is that

915.519 -> github doesn't support having multiple

918.72 -> callback urls here so if you want to

921.44 -> separate

922.16 -> if you want to use logo host for

925.36 -> testing purposes and development

927.36 -> purposes but you also

929.759 -> want to deploy it later

934.56 -> use a production url you have to create

936.88 -> a new

938.32 -> github os application which is also

942.56 -> pretty nice

947.12 -> so i'm going to hit register

951.68 -> and you can see that we have zero users

954.88 -> managed by github and um

958.56 -> we'll also see client id and kind of

960.399 -> secret

961.68 -> i'm just trusting you guys not stealing

965.12 -> my credentials and do something evil

967.199 -> about it

969.04 -> so for now i'm going to copy and

973.199 -> paste these

979.279 -> and just going to leave it there

983.759 -> save it i'm going to rename this to

987.12 -> dot m so it's actually parsed by

990.72 -> xjs

994.839 -> um

999.6 -> so uh

1006.24 -> so now let's get into the next auth

1010.56 -> file and import some stuff

1013.759 -> to work with first of all is

1017.279 -> let's just import the

1022.48 -> api handler type from next next gs

1026.64 -> so we can uh we can

1031.679 -> analyze the auto complete later

1036.839 -> blur

1043.12 -> handler and it will take a request

1049.2 -> and response and

1052.24 -> this will be passed

1056.4 -> actually this will be passed um

1059.679 -> passed directly to nyx off

1063.6 -> which is automatically imported by

1066.64 -> vs code which is pretty cool

1072.16 -> response and we'll need an option

1079.36 -> let's call it options oh

1084 -> so of course export default

1087.12 -> auth handler

1090.48 -> now we're going to implement the

1094.08 -> defining options the options

1097.2 -> is an object that should look like

1099.6 -> something

1103.039 -> this so

1107.44 -> next auth has

1111.72 -> a lot of pretty useful

1116.08 -> predefined built-in providers we're

1118.88 -> going to use

1120.72 -> riders okay i have to

1124.559 -> report it of course

1134.84 -> providers

1140 -> providers

1145.84 -> this is going to be wait a minute

1151.44 -> um we providers

1157.28 -> and we'll pass in an array

1160.64 -> so you as you can see here we have a

1164.32 -> ton of options to choose from these are

1167.44 -> all the built-in authentication

1170.48 -> providers

1173.52 -> of next auth and we're going to

1176.96 -> choose github here because we just set

1179.6 -> it up

1182.48 -> and for pretty much all the let's

1185.84 -> hit the yeah pretty much all the oauth

1189.12 -> options

1189.679 -> we're going to need to specify client id

1194.16 -> which is going to be

1203.36 -> first from the dot n file

1207.039 -> our project

1212.96 -> secret and also process dot m

1220.48 -> find a secret or a secret

1226.64 -> yeah it's called secret and

1230.32 -> this is actually pretty much it with

1232.84 -> github

1235.679 -> for the for the emails no

1240 -> we need some we need some more

1246.84 -> configurations need

1253.84 -> um we need server

1259.44 -> and server is going to

1263.52 -> post

1267.44 -> that is uh

1270.88 -> smdb host so

1276.799 -> course number

1282.08 -> and

1286.32 -> subscribe treats uh

1289.76 -> process.inf treats the environmental

1293.28 -> variables

1294 -> ought to be strings or

1297.76 -> arrays of strings so here we're going to

1300.08 -> cast it into

1301.2 -> number of the port port here

1304.559 -> is of type number

1307.76 -> and then we'll of course need the

1310.799 -> login credentials to our

1312.65 -> [Music]

1316.96 -> mtp server

1321.919 -> user and also

1326.72 -> s

1330.84 -> word and

1333.84 -> in many scenarios we'll need to define

1338.24 -> a process

1341.679 -> to define a from address

1344.96 -> this is okay this uh the form address

1348.159 -> should be outside of the server

1350.08 -> uh object so the from address is

1354.24 -> basically what you what you see uh

1357.52 -> as a receiver of the email recipient of

1360.72 -> the email

1361.6 -> where this email comes from so

1365.6 -> actually you can set this to anything

1368.88 -> and you can you can even set it to

1374.4 -> something like obama at whitehouse.gov

1378.24 -> but in that case your email might

1380.96 -> probably be treated as

1382.88 -> a spam email so um

1388.4 -> so we're going to uh

1393.44 -> we might have predefined the

1396.96 -> uh smtp server stp

1400.84 -> from environment variable here so we're

1403.52 -> going to put it

1404.88 -> put it from there

1409.919 -> boom cool

1414.64 -> and this is pretty much all we need to

1417.679 -> worry about

1418.32 -> about uh with the providers but

1421.679 -> in order to connect x auth to our

1424.72 -> database we're going to use prisma

1428.159 -> and that is done with

1431.279 -> from prismaclient

1434.4 -> and you can notice that we didn't

1436.72 -> actually specifically

1438.559 -> install prismaclient

1441.919 -> to our package we just installed a

1445.36 -> prismacli

1447.12 -> but when we first ran the command

1450.159 -> prisma generate prisma in it

1453.52 -> it automatically uh

1457.039 -> generates the uh client module to the

1460.24 -> dependencies as a dependency not a

1463.919 -> dev dependency um so here we're going to

1468.24 -> import prisma client

1472.64 -> and we're going to

1476.4 -> initialize new prisma clients

1482.4 -> and here we're going to use the adapter

1492.88 -> let me just make sure this adapter

1498.84 -> um

1504.96 -> yeah of course we're going to have to

1507.6 -> import the adapters here as well

1509.679 -> adapters and adapters

1514.48 -> test adapters

1518.4 -> so here we can see adapters

1521.919 -> forget defaults or

1525.679 -> prisma or typo rm in our case we're

1527.76 -> going to use prisma

1529.2 -> so prisma dot

1532.72 -> adapter then pass in the prisma client

1536.4 -> that we just initialized and finally

1539.279 -> we'll need to

1540.48 -> set a secret

1543.919 -> the process dot f dot

1549.039 -> of course from the environment variables

1555.52 -> and this is all about this setup here

1561.12 -> so in order

1564.48 -> to get to authenticate

1567.84 -> the users we need to implement the front

1570.72 -> end

1573.76 -> and one way to one convenient way to

1578 -> do it inside purely on the front end is

1580.88 -> to use the

1581.84 -> hook provided by next auth and the

1584.88 -> nexus library so um

1588.48 -> in order to use the hook we're going to

1590.32 -> have to wrap everything

1591.919 -> inside a session provider

1595.84 -> and i'm going to use the

1600.039 -> underscoreapp.txf under

1602.559 -> underscore app file

1607.039 -> which is a special file for an xjs that

1611.12 -> basically lets you customize the

1613.76 -> application route

1616.24 -> so here we're going to

1621.679 -> import again from next auth

1625.44 -> this time it's client

1629.919 -> and it's going to we're going to

1634.159 -> provider

1638.32 -> you can see this is a react functional

1642.08 -> component

1643.52 -> and also

1646.96 -> to import the next

1652.559 -> app crops

1656.24 -> types so

1659.6 -> i benefit from auto completion

1664 -> here we're going to ops

1674.48 -> it's going to lay out the skeleton and

1682.399 -> right

1686.559 -> and it's going to return

1690.159 -> and the provider

1694.96 -> and for the provider to work we're going

1696.72 -> to pass in

1698.48 -> session from the page

1711.919 -> and this one here this component here

1716.32 -> basically what's uh originally supposed

1719.52 -> to be rendered

1720.799 -> on the top level so we basically wrapped

1724.799 -> wraps everything inside

1727.919 -> a another layer uh the provider layer

1735.919 -> big props and then we're going to export

1741.6 -> default app cool

1747.76 -> so that's about the underscore

1749.919 -> underscore app

1751.12 -> now we're going to implement

1754.24 -> the

1757.84 -> button here so here we're going to

1764.84 -> import

1766.96 -> from

1770.24 -> auth and client

1776.24 -> three functions sign in and then

1779.76 -> sun out then the last one is

1784.399 -> going to be the hook new section hook

1790.24 -> and here

1795.36 -> we're going to first pull

1798.64 -> the user session actually i'm going to

1802.24 -> do this

1803.679 -> this section and then

1808.88 -> from right to left

1812.08 -> session and

1816.96 -> one is a loading boolean uh loading

1819.44 -> state boolean

1820.48 -> so what we got here is first the

1823.76 -> user session if the user is logged in

1826.96 -> so if the user is not logged in this

1829.44 -> will be

1830 -> null and we can

1833.039 -> check uh if the user had the right to

1835.76 -> visit some pages

1837.2 -> based based on the session

1840.72 -> object here

1844.08 -> and now if

1849.36 -> it's loading just going to return

1856.08 -> if maybe h1

1859.44 -> or something but i'm just going to use

1862.64 -> div here

1863.36 -> loading and uh

1871.6 -> like we said if session exists

1875.84 -> going to return

1882.72 -> if

1886.72 -> hello

1891.44 -> you can see the session here has a user

1897.279 -> on it and

1900.399 -> the user has the email image

1903.519 -> and name property so

1907.039 -> we're going to just type the name here

1911.519 -> and depending on the on the

1914.559 -> authentication providers

1917.76 -> some some authentication provider one

1920.08 -> won't give you access to

1921.44 -> the username or the email

1924.64 -> uh email address

1927.76 -> so i'm just going to use name here

1929.84 -> because i'm going to demonstrate

1931.76 -> the github github login later

1935.039 -> and github always gives you the username

1940.72 -> and actually

1946.84 -> on

1952.159 -> this inside a fracking fragment

1966.399 -> and i'm going to have a button here

1970 -> that's the user sign in or sign out

1973.6 -> so this is going to be sign

1977.12 -> in button button on click

1981.279 -> handler is going to

1985.039 -> call this function

1992.48 -> if you if you're using javascript you

1994.48 -> can pretty much just

1995.919 -> pass in uh pass in the sign-in function

1999.919 -> like this but i'm

2001.2 -> using typescript here there is uh

2004.32 -> there is some type misalignment if you

2006.88 -> do it this way so

2008.32 -> i'm going to just pass

2011.36 -> wrap it inside another function

2015.6 -> so if the session doesn't exist

2021.44 -> i'm going to

2026.32 -> say you are

2029.84 -> not logged in and

2034.08 -> signed out

2039.279 -> wait a minute i think i just yeah

2042.799 -> i just messed up this should be sign out

2047.519 -> and yeah of course

2051.44 -> if you are you're not logged in

2055.919 -> definitely want to log in not log out

2059.04 -> for even further so

2062.48 -> this is pretty much it and now we can

2065.28 -> actually

2066.24 -> start the dev server run f

2084 -> and let's check it out

2087.76 -> yay you're not logged in

2091.599 -> one moment let me fix this

2095.52 -> semicolon yep and i'm going to open the

2100.079 -> network tab

2103.76 -> and preserve log i'm going to see all

2107.28 -> the

2107.76 -> network requests here so when i click on

2110.72 -> sign

2111.04 -> in you're we are redirected to

2117.2 -> the the dynamic route

2121.04 -> sign in and followed by

2125.04 -> query prompts url params callback url to

2128.56 -> be whatever and

2132.64 -> here we can click on sign in with github

2139.52 -> and we are in turn sent

2142.56 -> to the github

2146.32 -> login oauth page because i

2149.599 -> already have my github account

2152.8 -> because i have already logged in my

2154.64 -> github i don't have to

2156.079 -> enter the password and the neat thing

2159.68 -> about using oauth is that you don't need

2161.76 -> to

2162.24 -> store the user password

2165.28 -> yourself which is probably going um

2168.72 -> which is a security concern if you want

2171.839 -> to do it yourself

2173.92 -> um i'm going to authorize oh

2177.28 -> i do have to input my password again

2180.8 -> and i'm sent back to

2186.24 -> there goes 3000

2192.8 -> and now um

2196.64 -> i can send off of course

2203.52 -> and i can sign back in

2208.079 -> and this is pretty neat

2213.68 -> so because yeah

2217.04 -> um let me switch

2221.599 -> so because we're using uh

2226.96 -> the hook we can only we can we can you

2229.2 -> we can only use the hook

2231.28 -> on the uh pure front end

2234.32 -> in the pure react uh environment you

2237.359 -> want to

2238.48 -> do something like uh

2241.599 -> get service ad props or

2245.359 -> inside and api routes which is

2249.28 -> let's call it secret

2252.56 -> up dot ts

2259.76 -> oh oh my god

2263.359 -> yes

2266.56 -> um here we'll have to use another

2271.119 -> function from a helper function from

2274.16 -> next from next auth it's called

2277.2 -> get session

2283.04 -> the corresponding uh counterparts

2287.599 -> on the react land is called use session

2290.56 -> here we have

2291.76 -> get session and concession from

2295.04 -> next off

2300.48 -> and yeah next of

2303.68 -> client actually

2310.16 -> next we're going to import the

2313.92 -> type for the api handler

2317.599 -> so we can perhaps benefit from

2321.599 -> type safety here okay

2332.48 -> club header

2343.28 -> and this has to be anything an async

2345.68 -> function because the

2347.04 -> get session here returns a promise

2350.96 -> so on the front end we have the useful

2353.44 -> boolean

2356.16 -> loading boolean to tell us if

2361.599 -> next auth is loading or not but on the

2364.32 -> back end

2365.04 -> we don't have the reacts

2368.96 -> we don't we don't have react and have to

2373.92 -> use async await and

2379.44 -> and here let's do cost session

2383.359 -> equals to await session

2388.96 -> and the get section here is going to get

2393.28 -> section from the incoming request

2395.599 -> request

2397.92 -> the request will have all the headers

2400 -> and cookies and tokens whatever

2402.96 -> for the for next auth to

2407.599 -> identify the user and pull the session

2411.44 -> from from it

2415.04 -> so here if

2422.839 -> session

2424.16 -> this is basically the same pattern

2427.2 -> as we did here uh

2431.68 -> if the session exists

2435.44 -> then we're going to welcome the user to

2438.72 -> our secret club

2442 -> welcome

2449.119 -> session dot user dot

2456.24 -> name

2459.68 -> and else we're going to

2463.68 -> send back a 403

2468 -> status code

2474.96 -> and the message will be

2478.88 -> you're not allowed here

2487.359 -> yep and finally export

2492.839 -> defaults

2495.839 -> handler

2500.24 -> so now if we

2504.96 -> go to the route api

2508.8 -> secret via secret club

2513.2 -> we're going to see

2516.8 -> it parses our user session correctly

2523.04 -> and we can actually

2526.56 -> inspect the inspect the headers here and

2529.44 -> you can see

2530.24 -> we have a giant cookie here

2534.88 -> with all the next auth

2538.64 -> token and sessions uh session token

2542.16 -> and everything so using next auth

2546.48 -> basically saves you all the effort to

2549.119 -> implement

2550.8 -> the uh the authentication yourself from

2554.96 -> from scratch

2558.079 -> and uh i'm just going to

2563.2 -> back to this page and you can see

2570.079 -> yep the cookie is always here

2575.119 -> and of course if you go to application

2578.8 -> and

2579.2 -> clear storage

2582.24 -> the cookie is gone and refresh the page

2584.8 -> or

2585.359 -> if if you don't even you don't even have

2587.76 -> to refresh the page

2589.119 -> it automatically refreshes refreshes for

2592.16 -> you

2593.2 -> so you're not not logged in and

2596.56 -> sign in again sign in with github

2600.319 -> yup and this is pretty much

2605.119 -> all we need to do to implement

2608.48 -> authentication using next auth prisma

2612.079 -> and next.js

2615.599 -> let me just walk you through the the

2618.24 -> whole process of

2619.68 -> once more so

2623.68 -> you need to define the secrets and

2627.2 -> uh sequence inside this dot

2630.4 -> info and also um

2635.599 -> from the next auth

2639.359 -> configurations here we need to

2642.96 -> set up the providers and also adapter

2646.8 -> and the secret of course as well

2651.04 -> so the adapter here is prisma

2656 -> and for for prisma to work we need to

2658.88 -> have a database running in the

2660.319 -> background

2661.52 -> and

2666 -> and a schema file that's

2670.24 -> specifically written for for the

2673.76 -> next auth package

2677.52 -> and

2681.92 -> so i'm

2685.04 -> i'm going to check if anyone has some

2688.839 -> comments

2692.72 -> yeah cool so uh

2696 -> if you can find the

2701.92 -> you can find the let me copy and paste

2704.56 -> this

2705.119 -> oh

2709.359 -> all right i better type it myself uh

2714.16 -> i find the

2717.28 -> ripple from uh from here

2720.8 -> prisma next

2726.16 -> and i just started from the

2730.16 -> start here branch which is basically a

2733.04 -> plain slate

2734.319 -> and when you're finished

2737.68 -> you'll have a project that looks like

2740.4 -> this

2741.28 -> and also i have written a little

2744.48 -> article tutorial covering what we

2747.76 -> just done here you can check this out as

2750.96 -> well

2752.319 -> so i hope you have learned uh

2757.28 -> been a lot and uh

2765.68 -> check out the ripple

2768.72 -> does anyone has any questions

2800.839 -> so

2807.52 -> yeah delete the app afterward i'll do it

2822.88 -> it or i'll just rotate

2826.079 -> reset rotate the secret but you can

2829.2 -> still see them so

2834 -> to delete the app you can go to advanced

2836.24 -> and

2837.52 -> delete cool

2841.359 -> and it's gone you can create it again

2845.28 -> of course uh

2855.44 -> i swear to rules

2859.04 -> yeah sweaty is awesome

2873.92 -> all right folks so i think i'll wrap up

2876.24 -> a wrap up here

2877.44 -> and uh see you soon

Source: https://www.youtube.com/watch?v=GPBD3acOx_M