The issue I am having is how to check if the user is logged in and show them another navbar instead of the navbar for everyone who is not logged in. I am using supertokens to verify my users, this is my app.tsx. This is my code -

import { SuperTokensConfig, PreBuiltUIList } from './database/auth/supertoken';
import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
import { Routes, BrowserRouter as Router, Route } from "react-router-dom";
import { getSuperTokensRoutesForReactRouterDom } from 'supertokens-auth-react/ui'
import { SessionAuth, SessionContext } from "supertokens-auth-react/recipe/session"

//Components
import Navbar from './components/nav/Navbar';
import NavbarAuth from './components/nav/NavbarAuth';
//Free Routes
import Home from './routes/free/Home';
//Protected User Routes
import Profile from './routes/user/Profile';
//Protecte Admin Routes


SuperTokens.init(SuperTokensConfig);

function App() {
  //Here
  const check = SessionContext;
  return (
<SuperTokensWrapper>
  <div className='App app-container'>
    <Router>
      {check ? <Navbar /> : <NavbarAuth />}

      <Routes>
        {/* This shows the login UI on "/auth" route */}
        {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"), PreBuiltUIList)}

        {/* Unprotected route */}
        <Route path="/" element={<Home />} />
        {/* Unprotected route */}

        {/* Protected route Users */}
        <Route
          path="/profile" element={
            /* This protects the "/" route so that it shows
          <Home /> only if the user is logged in.
          Else it redirects the user to "/auth" */
            <SessionAuth>
              <Profile />
            </SessionAuth>
          } />
        {/* Protected route Users */}

      </Routes>
    </Router>
  </div>
</SuperTokensWrapper>
  );
}

export default App;

hey @kiesker the session context we provide is available inside the (and its children).

Ok I see, but what would recommend changing components based on user authentication is success

I didn’t understand your question 😅. Could you rephrase?

So lets I have a two navbars for my website, one is called NavbarFree which is shown when the user is not logged in. But once the user is logged in, I would like it to show NavbarAuth, how would I get a way to verify if user is logged in and then change navbars?

You will have to build a component which is a child of SupertokensWrapper.

Ok, so I created this function but the issue I am having now is that session returns true all the time but why?

function App() {
  return (
    <SuperTokensWrapper>
        <div className='App app-container'>
          <Router>
              {NavbarChecker()}
            <Routes>
              {/* This shows the login UI on "/auth" route */}
              {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"), PreBuiltUIList)}

              {/* Unprotected route */}
              <Route path="/" element={<Home />} />
              <Route path='/About' element={<About />} />
              <Route path='/Contact' element={<Contact />} />
              {/* Unprotected route */}

              {/* Protected route Users */}
              <Route
                path="/profile" element={
                  <SessionAuth>
                    <Profile />
                  </SessionAuth>
                } />
              {/* Protected route Users */}

            </Routes>
          </Router>
        </div>
    </SuperTokensWrapper>
  );
}

export default App;

And this is my navbar checker

import { useSessionContext } from 'supertokens-auth-react/recipe/session';
//Navbars
import NavbarAuth from "./NavbarAuth";
import Navbar from "./Navbar";

function NavbarChecker() {
    const session = useSessionContext();
    
    //Check if session exists 
    //Which returns true all the time? Why.
    if (session) {
      return <NavbarAuth />;
    } else {
      return <Navbar />;
    }
  }
export default NavbarChecker;

You should see our docs for how to use the session context