Now that we have login with GitHub working, let's work on making this a more realistic flow. view, I will only display the user info if they are actually logged in. Otherwise, let's display a login button. Now I'm going to use NuxtUI to power our UI elements.
So the component we want to reach for is called UButton. it will have a label of login. And on click, let's call the open and pop-up function that comes from use user session. This just lets us run that GitHub auth inside of a new window that pops up over our current window.
This is a common flow for OAuth and is really just what users are already accustomed to. Great. Over in the browser now, we do still only see my user info. because we are currently logged in, meaning this VELTS does not execute.
Let's add in a new button right here in order to log out so that we can easily switch between these different states. And on click of this button, we'll call the clear function from use user session. Clear is the exact same thing as log out. It just clears that session, which wipes out our user.
Perfect. When I click on the log out button now, we see the login button. When I click on the login button, we get the popup. Since I've already logged in previously, I don't have to authorize with GitHub again, and we're redirected back to the homepage where we see the logged in state.
This is all great, but one thing that's not quite there yet is our styles. Notice that our button is just the default button styles from the browser. UI installed so that we could get something a little bit prettier. Well, while it's installed, there's actually one more step we need to do to get it working.
UI. UI styles themselves. ts with the CSS property. However, I like this other approach just because it's quick and simple for the sake of demonstration.
Plus it does the exact same thing. It just registers these styles globally. view, it applies to the entire application. Okay, over in the browser now, there's our nicely styled Nuxt UI.
button. Now that we have login with GitHub working, let's work on making this a more realistic flow. view, I will only display the user info if they are actually logged in. Otherwise, let's display a login button.
Now I'm going to use NuxtUI to power our UI elements. So the component we want to reach for is called UButton. it will have a label of login. And on click, let's call the open and pop-up function that comes from use user session.
This just lets us run that GitHub auth inside of a new window that pops up over our current window. This is a common flow for OAuth and is really just what users are already accustomed to. Great. Over in the browser now, we do still only see my user info.
because we are currently logged in, meaning this VELTS does not execute. Let's add in a new button right here in order to log out so that we can easily switch between these different states. And on click of this button, we'll call the clear function from use user session. Clear is the exact same thing as log out.
It just clears that session, which wipes out our user. Perfect. When I click on the log out button now, we see the login button. When I click on the login button, we get the popup.
Since I've already logged in previously, I don't have to authorize with GitHub again, and we're redirected back to the homepage where we see the logged in state. This is all great, but one thing that's not quite there yet is our styles. Notice that our button is just the default button styles from the browser. UI installed so that we could get something a little bit prettier.
Well, while it's installed, there's actually one more step we need to do to get it working. UI. UI styles themselves. ts with the CSS property.
However, I like this other approach just because it's quick and simple for the sake of demonstration. Plus it does the exact same thing. It just registers these styles globally. view, it applies to the entire application.
Okay, over in the browser now, there's our nicely styled Nuxt UI. button.