In the previous lesson, you built the authentication form allowing users to register and log in.

This lesson will focus on finishing the authentication flow by:

 function to clear the user and token states when the user logs out.

interface UserContextProps {
  user: User | null
  token: string | null
  setUser: React.Dispatch<React.SetStateAction<User | null>>
  setToken: React.Dispatch<React.SetStateAction<string | null>>
  login: (user: {
    username: string
    password: string
  }) => Promise<void | string>
  register: (user: {
    username: string
    password: string
  }) => Promise<void | string>
  logout: () => void
}

export const UserContext = createContext<UserContextProps>({
  user: null,
  token: null,
  setUser: () => {},
  setToken: () => {},
  login: async () => {},
  register: async () => {},
  logout: () => {},
})

  const logout = () => {
    setUser(null)
    setToken(null)
    localStorage.removeItem("newma-events-token")
  }

---
title: Finish the Authentication Flow
description: Add a logout function to the UserContext and a logged-in state to the LoginButton
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-sleek-web-applications-with-shadcn-ui-app/-/tree/main/new-events/06.04-finish-the-login-flow?ref_type=heads
privateVideoUrl: https://stream.mux.com/YFiZTrgiRl7fDJ00Jz2QTT3WBjVP6Ki5lIiqeBfKJM018.m3u8
---

In the previous lesson, you built the authentication form allowing users to register and log in.

This lesson will focus on finishing the authentication flow by:

1.  Add logout function to `UserContext`
2.  Adding a logged-in state to the `LoginButton`

### Add Logout Function to ‘UserContext’

The `UserContext` needs a `logout` function to clear the user and token states when the user logs out.

Start by adding the `logout` function to the `UserContext` type and initial state:

```javascript { actualFilename=../../code/new-events/06.04-finish-the-login-flow/hooks/UserContext.tsx endLine=22 startLine=7 statedFilename=hooks/user-context.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_06/lesson_06.05/.../code/new-events/06.04-finish-the-login-flow/hooks/UserContext.tsx#L7 }
interface UserContextProps {
  user: User | null
  token: string | null
  setUser: React.Dispatch<React.SetStateAction<User | null>>
  setToken: React.Dispatch<React.SetStateAction<string | null>>
  login: (user: {
    username: string
    password: string
  }) => Promise<void | string>
  register: (user: {
    username: string
    password: string
  }) => Promise<void | string>
  logout: () => void
}
```

```javascript { actualFilename=../../code/new-events/06.04-finish-the-login-flow/hooks/UserContext.tsx endLine=32 startLine=23 statedFilename=hooks/user-context.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_06/lesson_06.05/.../code/new-events/06.04-finish-the-login-flow/hooks/UserContext.tsx#L23 }
export const UserContext = createContext<UserContextProps>({
  user: null,
  token: null,
  setUser: () => {},
  setToken: () => {},
  login: async () => {},
  register: async () => {},
  logout: () => {},
})
```

Then, implement the `logout` function inside the `UserContext` provider:

```javascript { actualFilename=../../code/new-events/06.04-finish-the-login-flow/hooks/UserContext.tsx endLine=98 startLine=94 statedFilename=hooks/user-context.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_06/lesson_06.05/.../code/new-events/06.04-finish-the-login-flow/hooks/UserContext.tsx#L94 }
  const logout = () => {
    setUser(null)
    setToken(null)
    localStorage.removeItem("newma-events-token")
  }
```

Eyal Cohen

Add a logout function to the UserContext and a logged-in state to the LoginButton

Finish the Authentication Flow

In the previous lesson, you build authentication for allowing users to register

This lesson will focus on finishing the authentication flow by doing two things

function to user context, and adding a logged in state to the login button.

The user context needs a logo function to clear the user and token states when

logs out. Let's start by adding the logo function to the user context type and

Navigate to user context, add the logo function, and add it to the initial

Then implement the logo function inside the user context provider. It's fairly

Let's start by adding a logo function to the user context.

Now let's do the second step, adding a logged in state for the login button.

After the user logs in, you want to change the login button to show an

the user is already logged in, and allow the user to log out.

For the first part, you'll use the shadc.ui avatar component, and for the

show it to hope the menu with the logo button, and call the logo function.

Let's install both components, shadc.ui at latest, add avatar, and drop down

Let's get the user and logo function from the user hook.

If there is no user, we want to render the login button, which we currently

And if there is a user, we want to render a drop down menu with a trigger,

the button that will be opening the drop down.

We want to render an avatar with the avatar fallback component.

Then we want to show the username first characters.

Now add the drop down menu content, what will be shown once the trigger is

Then add a drop down menu item, and on click fit, and once the user click on it

Now let's go to the site header, and update the login simple button that we had

We run the app, and open it in your browser.

Now we can see that we have an iteration error.

This means that the initial HTML coming from the server was not matching the

There is a mismatch between the server HTML to the one on the client.

We can solve that by adding a is init completed state to the user context.

Add init completed boolean, set it to false in the initial state, and create a

Now let's go back to the login button, get the init completed value, and if it

true, simply render an empty avatar fallback component.

Refresh the page, and now we don't have any issue.

We can actually test the click on the logout, refresh the page, and we don't

I'm refreshing the page, I don't have any issue.

In the next lesson, we will implement the RSVP functionality.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript