score:0
after some time, i just figured out how to do what i needed to do, so i post it here just in case someone also encounters this problem and seeks help.
if you don't use redux or context api and still want to implement this kind of feature, here's how i do:
so what i needed to do? i want authenticate through firebase, what you need to do -at least what i found- implement a app/level/state in order to check if user logged in or not and update the app level rendering, that renders the whole app and enforces behaviour accordingly.
so:
function app() {
const [user, setuser] = usestate(null);
const [isloading, setisloading] = usestate(true);
useeffect(() => {
const unsubscribe = onauthstatechanged(auth, (user) => {
setisloading(true);
if (user) {
setuser(user);
} else {
setuser(null);
}
setisloading(false);
});
return unsubscribe;
}, []);
if (isloading) return <spinner />;
return (
<>
<router>
<routes>
<route path='/' element={<privateroute user={user} />}>
<route index element={<explore />} />
<route path='/offers' element={<offers />} />
<route path='/profile' element={<profile />} />
<route path='/create-listing' element={<createlisting />} />
<route path='/category/:categoryname' element={<category />} />
</route>
<route
path='/sign-in'
element={!user ? <signin /> : <navigate to='/' />}
/>
<route
path='/sign-up'
element={!user ? <signup /> : <navigate to='/' />}
/>
<route
path='/forgot-password'
element={!user ? <forgotpassword /> : <navigate to='/' />}
/>
</routes>
<navbar />
</router>
<toastcontainer autoclose={1000} />
</>
);
}
export default app;
here, basically after component mounts, we want useeffect to only execute once and set up listener for auth state changing, whenever auth state changes like sign-in or log-out, the code block of onauthstatechanged runs and when it runs, every time it sets the user if there's one or not, therefore re-renders the component which is app itself, and below the routing works accordingly. if you have a private route as i do, you can just pass the user as a prop, then:
import { navigate, outlet } from 'react-router-dom';
function privateroute({ user }) {
return user ? <outlet /> : <navigate to='/sign-in' />;
}
export default privateroute;
Source: stackoverflow.com
Related Query
- React - Firebase authentication and useContext
- Trouble adding authentication with React and Firebase
- React-Firebase routing and authentication approach
- Flask and React routing
- react routing and django url conflict
- How to fix nextCreate is not a function setting up useMemo setting up authentication react router and hooks
- Authentication with oidc-client.js and Identityserver4 in a React frontend
- How to correctly redirect after catching authentication failure with Apollo and React
- Problem with protected routes, context API and firebase user authentication request
- Subdomain Routing in React and React Router
- react routing using RouteComponentProps and custom props
- Firebase React Native -- how to grab and transmit Device ID/Token?
- React + Firebase Storage + File upload and progress display
- React routing between static and dynamic pages
- React with Firebase authentication
- MSAL authentication and authorization from React to Web API
- Implementing authentication and authorization with React hooks, .NET Core Web API, and SQL Server
- Sharing code between Firebase Functions and React
- User authentication with ASP MVC and React
- How to add login authentication and session to ReactJS React Router and Redux with MongoDB + NodeJS Express?
- How to perform authentication with React hooks and react-router
- Call a Python script from React with next routing and a node.js server
- Authentication using ReactJS and Firebase
- Active Directory Authentication with .NET Core Web API and React
- react firebase authentication with apollo graphql
- Meteor, React Router 4, and Authentication
- React V6 route guarding and routing within component
- How to make Relay and React Routing work properly?
- Memory leak in my React app because of firebase and how to avoid it?
- React js Firebase authentication is not working properly
More Query from same tag
- React - Add query string via text input on change
- Set pagination on MaterialTable ui https://material-table.com/#/docs/features/localization?
- fetching json data from local file
- Next.js shared component (header) gets rerendered on new route
- How to apply transitions to full page in material-ui and keep AppBar fixed?
- Access nested state
- Component is returning a TypeError: Cannot read property 'map' of undefined
- this.props equal to nextProps componentShouldUpdate
- Merge react app with react native app
- Manipulating DOM in componentDidMount() without setTimeout
- How to do a simple fade in transition on React Motion?
- pass props with functional component without declaring function within component
- How to get the teamId and userPrincipalName on my tab.js?
- Deselect checkboxes based on dropdown select value in ProComponents React
- Rollup image import with only file copy and preserve import
- useEffect socket.on problem rerendering useState
- http-only cookie + token : double job?
- POST request from React to Express
- Animating a GIF on Canvas using react-konva
- Don't make functions within a loop no-loop-func -React JS
- After changing state, content is not rerendering
- How to render different api components at same time in reactjs?
- Redux-Form Understanding Multipage Form Ajax PUT
- Add children Route's in a component React
- Generating a PDF file from React Components
- How to allow only one active useState
- Redux store goes undefined despite successful initialization
- Getting error when destructure value from state in TypeScript
- How does a GraphQL mutation know what node it's modifying? Is there a unique and global node ID for each node in the database?
- React-materialize-css Modals not working because it cannot read Modal class of M