Reactiflux

Join the Reactiflux server to ask questions!

Join

Reactiflux

Join the community to ask questions about Reactiflux and get answers from other members.

Join

react-forum

help-js

help-threads-react

DINO

11/13/2024

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

Hikmet

10/27/2024

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.

DINO

9/29/2024

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....

Telash

9/8/2024

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

Rare

7/28/2024

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

Telash

7/18/2024

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)...

Ray

5/18/2024

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 🥲

DINO

4/14/2024

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...

DINO

4/5/2024

Make Zustand store scalable

Hello, This is my Zustand store state type: ```ts...