The issue I am having is how to check if the user is logged in and show them another navbar instead ...
k

kiesker

about 2 years ago
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;
NestJS Cors Error CorsMiddleware/SuperTokensMiddleware
r

romanco8751

over 2 years ago
Hi SuperTokens 🚀, I ran into an issue with CORS when I tried to integrate your ThirdPartyEmailPassword recipe to my application. My Vue.js frontend app is running at "http://localhost:8888" and the NestJS backend api server at "http://localhost:3000". I followed thoroughly your integration guide for NestJS, however after long hours of search, I cannot figure out how to make the CorsMiddleware run before the Supertoken middleware. I get the following CORS error when a request is sent to one of the supertoken core endpoint. Access to fetch at "http://localhost:3000/auth/signup/email/exists?email=johndoe@gmail.com" from origin "http://localhost:8888" has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard ' * ' when the request's credentials mode is 'include'. Here is my main.ts code: async function bootstrap() { const app = await NestFactory.create(AppModule); app.enableCors({ origin: ["http://localhost:8888"], allowedHeaders: ['content-type', ...supertokens.getAllCORSHeaders()], credentials: true, }); app.useGlobalFilters(new SupertokensExceptionFilter()); await app.listen(3000); } bootstrap(); Supertoken config in the **app.module.ts**: @Module({ imports: [ AuthModule.forRoot({ connectionURI: "http://localhost:3567", appInfo: { appName: "IMAT Planner", apiDomain: "http://localhost:3000", websiteDomain: "http://localhost:8888", }, }), ], controllers: [AppController], providers: [AppService, Client], exports: [AppService], }) export class AppModule {} **auth.module.ts**: export class AuthModule implements NestModule { configure(consumer: MiddlewareConsumer) { consumer.apply(AuthMiddleware).forRoutes("*"); } ... } Can you give me an hint on how to make the CORS middleware run before the Supertoken one ?