How do I handle authentication state in a SPA react app?
Hello,
I have implemented authentication in my backend that uses http only cookies, so now I am not sure how do I handle authentication state in a SPA react app.
When the user logs in I would like to store the auth state in a store like React Context or Zustand, but what if the user closes the app and opens it again? Should I hit an API route like
getUser
every time he opens it and if it returns the user that means he is sill logged in?...Solution:
When the user logs in I would like to store the auth state in a store like React Context or Zustand, but what if the user closes the app and opens it again? Should I hit an API route like getUser every time he opens it and if it returns the user that means he is sill logged in?Yes. This
getUser
API endpoint shall be called once when the user opens the app the first time, then the user data is stored in the React Context/Zustand store
The choice of HashRouter
or BrowserRouter
shouldn't really matter. Either one should be fine...Message Not Public
Sign In & Join Server To View
Session token received but it doesn't work
Hello friends, I tried to authenticate by following a video with next.js. At first I couldn't even log in, but I made a mistake and I fixed it. My problem now is that when I log in to the site, the session token is created and I can see it from devtools. However, logically, the logged in user should not be able to come back, but I can come back to the login page. https://github.com/HikmetMelikk/authnmore You can review the codes here and we can discuss them. Thanks in advance.
Solution:
Use the file middleware.ts (or .js) in the root of your project to define Middleware. For example, at the same level as pages or app, or inside src if applicable.
I would like implement multiple tabs navigation inside my React app, where do I start?
Hello,
I am building a large react app, and I would like to open up new tabs inside my app when the user click on some links. My app does already use React Router v6 for routing already.
I tried to do it by myself but I failed, so I would appreciate if someone showed me where do I start....
Why the left code isn't working but the right one is?
: S
Solution:
Turns out I was returning an object and I must wrap it with something in order to make the jsx work
React router best practice
Im new to react router, I want to pass state down to my components that are in different URL paths
This is the file I'm stuck with,
App.tsx
```ts
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Greeting from './pages/Greeting';...Solution:
Solution is to use
useOutletContext
How can I exclude the street name out of the string this component give me?
I am using '@react-google-maps/api', basically the component is a dropdown and an search input for searching hotel names, just like the real google maps. the problem is that I do not know how to exclude the street name out of the string it give me, which is what I wish. any ideas will be appreciated, thanks :]
example of a result string: Hotel Washington, 15th Street Northwest, Washington, DC, USA (I am not sure that all hotel names will be without a comma in their naming)...
React useContext is not a function...
Plz, someone can help me with the error in the image?
Code:
```tsx
import { Chip } from "@nextui-org/react";...
Solution:
My bad bro, i dont have the Context.Provider 🥲
How do I query data with Tanstack Query if one of the query params can be undefined.
Hello,
I have an
id
variable that can be undefined because I get him from useParams
, and I use the id
value to query data with Tanstack Query, but Tanstack Query requires to have a value that cannot be undefined which is very logical. So I had to do Number(id) || 1
and enabled: !!id
this way:
```ts...