navBar logout button

[stoic talon]

Hi @lunar spruce. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To achieve this, you can use a context to store the user's login state and then conditionally render the login or logout button based on this state. Here's a simplified example based on the knowledge sources:

First, create a context to store the user's login state. This could be in a file like UserContext.js:

import { createContext, useState } from 'react';

export const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={[user, setUser]}>
      {children}
    </UserContext.Provider>
  );
};

In your NavBar component, you can use this context to conditionally render the login or logout button:

import { useContext } from 'react';
import { UserContext } from '@/lib/UserContext';
import Link from 'next/link';

export default function NavBar() {
  const [user, setUser] = useContext(UserContext);

  const logout = () => {
    // Add your logout logic here
    setUser(null);
  };

  return (
    <div>
      {user ? (
        <button onClick={logout}>Logout</button>
      ) : (
        <Link href="/login">Login</Link>
      )}
    </div>
  );
}

In your Login component, after a successful login, you can set the user in the context:

import { useContext } from 'react';
import { UserContext } from '@/lib/UserContext';

export default function Login() {
  const [user, setUser] = useContext(UserContext);

  const login = async () => {
    // Add your login logic here
    // If login is successful, set the user in the context
    setUser({ /* user data */ });
  };

  return (
    <div>
      <button onClick={login}>Login</button>
    </div>
  );
}

Remember to wrap your app with the UserProvider in your _app.js file:

import { UserProvider } from '@/lib/UserContext';

function MyApp({ Component, pageProps }) {
return (
<UserProvider>
<Component {...pageProps} />
</UserProvider>
);
}

export default MyApp;

This is a simplified example and you'll need to adjust it based on your actual login/logout logic and user data.

Sources:
- **Vercel > Guides > Persisting authorization state and logging out Part 2** (<https://vercel.com/guides/add-auth-to-nextjs-with-magic#persisting-authorization-state-and-logging-out>)
- **Vercel > Guides > Creating the first pages Part 2** (<https://vercel.com/guides/add-auth-to-nextjs-with-magic#creating-the-first-pages>)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

@lunar spruce kapa.ai is still learning and improving, please let us know how it did by reacting below