Building the Login Button

[00:00 - 00:08] In the previous lesson you have created the user context. And in this lesson, you will learn how to create and implement the RSVP button and the login button.

[00:09 - 00:15] When a user will click the RSVP button, you will check if he is logged in. And if not, you will show him a sign-in dialog.

[00:16 - 00:22] You will show him an authentication dialog. For the authentication dialog, you will use shadcn/ui dialog component.

[00:23 - 00:36] So let's start by installing it. npx shadcn-ui@latest add dialog.

[00:37 - 00:55] Now the next step is to create a new login button file in the components folder . Now declare it as a client component and import the user state hook from React.

[00:56 - 01:25] Import the Cn function as well, the button and the button props from the button component of ShadCNUI, and the dialog, dialog content and dialog trigger components. Declare the login button component with a label, we will make it login by default, a class name, and an incomplete function.

[01:26 - 01:49] We will also get button props as well. Label is a string which is optional, an optional class name, and an incomplete is a function that doesn't return anything, and we want the button props as well.

[01:50 - 02:16] Now creating a new state variable called "isOpen" and set it to "false by default". Return from the login button a dialog container with the open state, set to " isOpenState", and on open change we will allow the dialog to tell us when the user is closed the dialog.

[02:17 - 03:14] The dialog trigger will wrap a button, let's pass a class name with the Cn function, a 24 width that can be overrided with the class name prop, then we will pass the button props, and an on-click function that will stop the propagation, and call the setIsOpen to true Render the label inside, now render the dialog content, and for now we'll render an empty div inside. Let's use the login button inside the RSVP button that we've built on the first lesson.

[03:15 - 03:52] The RSVP button will conditionly render the login button, if the user is signed out, let's start by importing the useUser hook, replace the immediate return with the function body, and call the hook, and destructure the user object, and condition render the login button. If there is a user who will render the RSVP button, and if there is not, we'll render the login button.

[03:53 - 04:03] We can pass the RSVP label into it, so the user experience will be the same, and pass a small medium size. Let's see that in action.

[04:04 - 04:28] Run the app, if you have an issue, feel free to jump on the discord, and open localhost 3000 in your browser, now click on an event, and if you click on the RSVP button, you can see the dialog content being rendered. In the next lesson, we will add an authentication form inside of it.

[04:29 - 04:35] There is one fix we need to make though. We are not passing the class name from the RSVP button to the login button.

[04:36 - 04:43] Let's check that out. Now the RSVP button is full width.