NextJS ChakraUI Prisma Social Dashboard | Episode 4

Aug 15, 2023

NextJS ChakraUI Prisma Social Dashboard | Episode 4

NextJS ChakraUI Prisma Social Dashboard | Episode 4
Social Dashboard Episode 4 | Login, Logout, Profile, Fixes.
Hey! In this episode we fix few things especially on the Navbar, we fix few prisma.schema fields, the global style of the application and we implement the Login, Logout routes correctly and the the Profile page as draft checking if we can protect this route is case we’re not logged in.

Enjoy!

#prisma #nextjs #devcontainer

Environment: TypeScript, Prisma, NextJS, PostgreSQL, VSCode remote container, ChakraUI, ARM64, Node16

Closed captions sponsored by Prisma. Get yours for free here: https://pris.ly/closedcaptions

Work with devcontainer:    • Getting Started with VSCode devcontai…
I remind you that you can also work locally, devcontainer is not a must.
Mac users: don’t forget to enable access to workspaces in Docker desktop in settings/resources/file sharing and add the /workspaces path.

Demo:    • Social Dashboard New Tutorial Announc…
Episode 1:    • NextJS ChakraUI Prisma Social Dashboa…
Episode 2:    • NextJS ChakraUI Prisma Social Dashboa…
Episode 3:    • NextJS ChakraUI Prisma Social Dashboa…

Timeline:
00:00 intro
01:30 fix global style in the app
03:00 Profile page/route
07:00 fix prisma.schema
08:05 re-migrate
09:15 Login route
15:25 test login
16:35 fixing Navbar after login
19:00 logout
24:00 .prettier for our project

Content

3.65 -> - Hey guys, welcome back to my channel.

5.83 -> I'm Daniel and without wasting further time,

9.7 -> we want to continue with this episode.

12.13 -> Developing or fixing few stuff.

14.78 -> So, in the last video,

17.62 -> we left the state of the application so

24.86 -> We have now the chance to be logged in but,

29.44 -> I will not actually clean my application state because

34.41 -> at the moment I don't have anything for logging out so.

38.25 -> The signup work and now we want to implement the login.

44.28 -> So, we have this kind of error and login doesn't work.

49.55 -> So, if I try to sign up with John Doe,

55.47 -> he's actually going to pass through the login

60.05 -> saying to us that,

66.517 -> "User with that email already exists."

68.57 -> So, our error for registering is going to work.

73.27 -> So, we want to implement login.

75.99 -> So, let's clean this up

77.43 -> and actually I want to fix a few things now.

81.88 -> So the last time we say that

86.7 -> this profile shouldn't be active,

89.03 -> this login button,

90.67 -> we should be disabled because we are not logged in.

95.02 -> So, what I missed actually in my app

100.25 -> is to import our global style.

102.94 -> So, can remove the first line and we have to import.

117.97 -> We have to import our global style.

120.17 -> Otherwise everything that we have

124.56 -> inside the styles global

128.29 -> is not being considered.

131.84 -> So, styles global

134.09 -> globals that

137.74 -> CSS.

139.01 -> Just restart this one.

141.8 -> And now everything we have imported is going to work.

146.91 -> So actually our profile now is disabled

152.47 -> and this logic because we are not logged in so.

158.11 -> Of course, if we type profile manually in our URL,

162.71 -> this one does not exist.

164.47 -> But if we implement now,

166.95 -> the profile page is active,

170.83 -> but in the future we want to implement

173.835 -> a protection for this.

174.99 -> But you know what?

176.66 -> Let's implement this because

181.689 -> it's something that we want to do.

186.58 -> Profile that TSX and

192.167 -> const

197.03 -> profile and open brackets and what am I doing?

202.87 -> 31st of this year it's hard and

209.76 -> hope that everything is going good for you guys.

214.39 -> So useMe Query for importing our user because

218.45 -> we have to check our user state somehow and

227.43 -> const to router.

230.87 -> We will need the router as well.

233.55 -> useRouter.

235.673 -> This is from next router and not from react.

241.873 -> The useEffect the first one they want to import,

247.38 -> again if (me)

254.14 -> I think is that something that.

259.43 -> Okay.

261.28 -> We didn't implement yet.

268.09 -> Of course we have it.

272.911 -> So this is the same actually.

277.89 -> Const useEffect.

280.64 -> The loggedIn function is completely different

286.53 -> because this is just a protection they want to use.

293.01 -> Just check if isEmpty.

297.63 -> Router.push

304.16 -> Just this one. Don't worry if this warning says that

307.43 -> you have to import router

309.78 -> Don't do that.

311.09 -> We will see how we can do this.

318.8 -> This is my

324.74 -> profile page.

327.58 -> So now what do we have if I type

333.15 -> profile it's not a React Component.

337.29 -> Profile that TSX and

345.53 -> export default.

349.15 -> Profile and look at this we are

354.38 -> automatically redirected on the index.

357.24 -> So imagine that,

360.38 -> we put this one in comment and

367.59 -> we have the profile but since it's protected

372.03 -> and we are not logged in,

373.89 -> I want to implement this,

376.437 -> and it's something very good for us.

379.82 -> So profile is protected

381.47 -> since we are not logged in.

386.26 -> So, this kind of logic.

388.31 -> Just leave the profile page like this at the moment.

391.24 -> We will implement this later, maybe at the end.

394.99 -> This is one of the last things we are going to do.

398.08 -> So, we have fixed the app, that TSX page.

402.12 -> We have the style implemented.

405.68 -> Just for being sure, imagine that

411.7 -> we implement this.

413.22 -> We should have the color red of the

418.37 -> proof that this works.

421.07 -> Okay, another thing that I want to fix with you guys

424.02 -> is the user because

425.8 -> when we created the schema actually,

428.89 -> we left the Schema Prisma plug in auto complete for us.

436.31 -> So, the problem is that

439.03 -> I should have put these comments like this and likes,

446.15 -> but the auto complete worked for us.

449.77 -> So, I actually forgot to

453.1 -> work with this

456.15 -> and to fix this.

457.35 -> And also, I forgot to put unique email

461.81 -> because the user email should be unique.

465.08 -> So, now that this is fixed,

471.92 -> let's remove migrations.

476.07 -> This is from

482.8 -> remove the migrations and

490.8 -> prisma migrate dev should ask you that

493.27 -> you're going to lose everything.

497.18 -> And let's start again from the first migration as well.

508.168 -> So, npm run dev.

510.04 -> Everything should work fine as before but,

523.28 -> yeah the first one, we're just red

525.49 -> because we have reset the database.

533.91 -> Let's clean again.

537.618 -> The upper cushion.

540.96 -> Okay, for the next step is to

547.96 -> implement the login.

550.14 -> It is loading. We have errors.

551.64 -> Okay so let's do this.

553.62 -> In the pages api, we have sign up.

556.66 -> Let's create.

561.4 -> Login.ts and what is going to do the login?

573.93 -> Async function.

577.278 -> Oh the auto complete was actually good.

584.02 -> Request.

586.41 -> NextApiRequest.

587.51 -> Response.

588.54 -> NextApiResponse.

597.92 -> And fist thing structure the email and password.

611.67 -> Receive them from the req.body.

615.86 -> Let's create a user.

620.75 -> 'await' because we're in an 'async function' so,

623.8 -> 'await prisma' from lib user.

631.48 -> Lets find the unique first and

635.27 -> create an object where

641.89 -> our good email.

644.13 -> Alright, so we are gonna find from this mail

647.11 -> that comes from the request body.

650.43 -> Okay, if you check on them

652.13 -> if (email) not email

657.38 -> and not password.

660.31 -> That means should be empty.

665.12 -> We res.json with an object of error

673.54 -> has de-registered actually, but in quotes so.

685.26 -> You should fill the form. I have this cool icon right here.

688.96 -> Copy and paste should fill the form and

696.26 -> yeah return after.

700.41 -> That way it stops, everything is not going to continue the.

706.9 -> Another condition, this is important, if user and

715.54 -> I think that I have to import, yeah.

719.51 -> Bcrypt from 'bcrypt'. Yeah.

721.662 -> Import b.

732.78 -> So what bcrypt is going to do.

738.64 -> We have to compare bcrypt function.

741.92 -> So the password then the user.password.

753.117 -> You know what?

753.95 -> Let's stop this and want to restart after,

756.05 -> we need more space.

760.06 -> Yeah, the token.

762.89 -> Create a token.

765.25 -> Again, import JWT from JWT, 'jsonwebtoken' actually.

779.18 -> We have the sign function.

784.23 -> So we pass the email.

788.27 -> This will be user.email.

790.21 -> Then the ID,

795.54 -> user ID, and the time

800.1 -> is a simple new date

806.372 -> Process.env.JWT_secret,

816.77 -> or an empty, an empty string and yeah.

827.27 -> Open curly braces expiresin.

834.94 -> It's oh my God.

838.05 -> Struggling typing expiresIn.

847.25 -> So I want to set the other as the signup

849.589 -> is the same and yeah, yeah, yeah.

858.72 -> So it's pretty the same.

862.31 -> Set cookie, cookie serialize token

866.69 -> Lets import cookie.

873.96 -> It's exactly the same path, same size lax production,

879.34 -> secure process env.

888.823 -> We res.json object.

892.42 -> Then we have an else here

896.4 -> and res.json in case of error,

905.551 -> incorrect email or password and,

917.49 -> and return okay.

919.22 -> Let's test this one real quick.

925.21 -> So yeah, you can reach the, great come on.

930.48 -> Okay, login.

933.66 -> Okay, should fill the form.

935.73 -> We don't have anything. Let's put six characters.

946.06 -> Good! So, we returned the good object.

953.356 -> So, the fact that login works allows us to go on the login.

965.76 -> And now we are logged in and

969.54 -> we should be able to go in the profile.

971.69 -> We will fix this one

975.63 -> and next so we can easily go on the button as well.

983.81 -> So on the Navbar, we have

992.113 -> All right, so let's do this.

994.2 -> We are actually logged in.

996.459 -> So I want to open the Navbar and

999.13 -> what is missing here is effect to that.

1004.27 -> We should check for the user.

1011.603 -> So I useMe with that.

1016.52 -> It's exactly the same use effect.

1020.84 -> So, very copy and paste.

1027.94 -> Actually not, we should use this one.

1033.72 -> So the same use effect that we have on the next page.

1041.1 -> So the result is that now, also the Navbar knows if we are

1047.53 -> logged in or not.

1051.54 -> And also since we are using the

1054.78 -> good use effect in the Navbar,

1057.54 -> the fact that we pass in this condition,

1063.21 -> it throws our LogoutButton

1066.087 -> because this is going to be the False.

1068.627 -> So we'll not have the log in button anymore.

1073.43 -> But, we have the log-in button that doesn't do anything.

1076.14 -> So let's suppose we clear everything

1080.3 -> we should be in logged-in state

1082.59 -> and we tried to log in.

1088.46 -> So again, we put the John Doe user.

1093.15 -> So it's already registered. You log in, should work.

1098.71 -> Good. So, we have the login successfully logged in,

1105.85 -> sorry for the play, playing with words.

1111.63 -> But we are logged in correctly.

1113.84 -> So we have our state, very good updated.

1119.07 -> So now imagine that we have here the here the

1122.941 -> what did I click on?

1123.95 -> Yeah, it was the link.

1125.52 -> So we have the create posts form and the log out.

1132.835 -> So don't do a very long video as always so

1135.35 -> at least let's implement the log out button that

1139.65 -> doesn't do anything.

1140.77 -> So, close this one and in the log out button,

1148.86 -> what we are going to do.

1151.5 -> So, we have a button from Chakra UI react and

1158.01 -> want to create a function on it.

1160.41 -> But first let's create a logout route in the api, yeah.

1171.44 -> So logout.ts.

1181.16 -> Export default function handler.

1189.549 -> NextApi, where are you? NextApiRequest.

1197.68 -> Oh my god! I'm really struggling,

1202.46 -> typing on his new Logitech Keyboard.

1204.9 -> I should get maybe a mechanical keyboard.

1216.74 -> We have to create a cookie variable when we log out and

1221.769 -> serialize token.

1227.23 -> This is a syntax.

1235.7 -> Should I import something from?

1238.35 -> What the heck is that,

1240.825 -> not v8 but cookie.

1249.31 -> MaxAge, what is it?

1251.9 -> Minus one and the path.

1268.02 -> Okay set, just double o.

1279.73 -> Of course it's a cookie

1286.685 -> and res.json

1295.289 -> loggedOut true.

1300.05 -> So logoutButton and let's implement this

1305.21 -> in the logout button.

1307.21 -> So, I want on this button,

1311.75 -> we can have not a sync, but onClick.

1318.89 -> Then the sync arrow function.

1326.46 -> Okay.

1336.17 -> Data and error.

1340.36 -> So await the fetcher as we did in the login.

1348.083 -> Api the route that we created

1353.02 -> just empty object here because

1355.94 -> the fetcher requires data.

1363.22 -> So if error return after this,

1374.84 -> await mutate, want to update the route,

1383.19 -> our home route, checking for the me.

1390.78 -> Why this is just here?

1395.17 -> We have other properties, button properties actually,

1402.37 -> solid color scheme.

1407.71 -> I found this very cool - Twitter.

1413.24 -> And the size, yeah, medium.

1422.36 -> Margin rights for and leftIcon.

1428.983 -> Can have a left icon, actually.

1435.41 -> Lock icon from Chakra UI,

1440.06 -> self-closing tag, I prefer and log out.

1448.41 -> Oh, actually, I'm going to create a prettier

1451.66 -> because it really bothers me that it doesn't format.

1461.75 -> Prettierrc, so the prettierrc one custom that I created so.

1469.36 -> Single quote, true.

1476.61 -> PrintWidth, 120.

1484.6 -> Trailing comma, none.

1491.24 -> TabWidth, two is okay.

1499.346 -> ArrowParens, avoid.

1506.55 -> So everything completely different from,

1510.36 -> ease actually suggesting to me.

1512.96 -> Single quote, true yeah.

1515.92 -> Alright so, just restart this and

1520.16 -> what should we try now?

1525.34 -> I want to maybe.

1528.59 -> Oh the first time you have to do format document with.

1532.6 -> Prettier.

1534.45 -> So every time we save a file.

1537.54 -> So we'll test on this one.

1540.345 -> I think it's already formatted, but yeah.

1545.13 -> Okay, so now we have this cool color for the

1547.11 -> log out button and look at this, it works nice.

1551.81 -> So we login.

1558.01 -> Log in. You have to pop up. The nav bar has been updated.

1562.86 -> And when we've put it in the first,

1565.65 -> one of the first video the icon,

1568.19 -> this is updated as well because we have the avatar.

1572.89 -> Just for showing you the avatar is here.

1577.92 -> So, in case of logged in,

1580.16 -> we rendered the avatar otherwise this empty string.

1584.7 -> Let's just create another user.

1597.1 -> Okay, sign up.

1601.32 -> User email we will put then the user maybe,

1607.97 -> Jane Dale welcome back. [email protected].

1611.7 -> Something like this. These are details actually.

1613.7 -> I mean, fixes that we can do.

1617.43 -> Okay, so we have fixed this.

1620.91 -> Maybe next videos, we will start implementing

1624.84 -> the create posts form.

1626.92 -> So it's all for this video.

1628.59 -> I didn't want to make another long video.

1631.41 -> So hope you guys you enjoyed

1633.81 -> and don't forget to subscribe,

1635.95 -> smash the like button and comment

1637.41 -> if you have any kind of issues,

1638.8 -> I will try to help you as soon as I can.

1642.79 -> I will wish you a Happy New Year,

1646.65 -> if it's not already the case in your country

1649.5 -> and I'll catch you in the next one.

1652.122 -> Bye.

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