Back
Appwrite is using localStorage for session management. Increase your security by adding a custom dom
- 0
- Auth
- Web

TypeScript
import { account } from "../Appwriteconfig";
import { useNavigate } from "react-router-dom";
const Login = ({}) => {
const [isauthenticated,setauthenticated]=useState('')
const handlelogin=async (e)=>{
e.preventDefault()
let login= await account.createEmailSession(e.target.email.value,e.target.password.value)
if (login){
setauthenticated(true)
}
else{
setauthenticated(false)
}
}
return (
<div
className="flex items-center justify-center h-screen bg-cover bg-center"
style={{
backgroundImage:
"url('https://static.cdninstagram.com/rsrc.php/v3/ye/r/YVr3E4VYzmE.png')",
}}
>
<div className="bg-white bg-opacity-30 p-8 mt-20 rounded-lg w-96 ">
<h2 style={{'color':'black'}} className="text-2xl font-bold mb-4 ">Login</h2>
<form onSubmit={handlelogin}>
<input style={{'color':'black'}}
type="email" name="email"
placeholder="Email"
className="block w-full p-2 mb-4 border rounded"
/>
<input style={{'color':'black'}}
type="password" name="password"
placeholder="Password"
className="block w-full p-2 mb-4 border rounded"
/>
<button
type="submit"
className="w-full p-2 bg-blue-500 text-white rounded hover:bg-blue-600"
>
Login
</button>
</form>
</div>
</div>
);
};
export default Login;
TL;DR
Developers are seeking to increase security by adding a custom dom to Appwrite, as it is currently using localStorage for session management. The issue raised in the thread concerns the rendering of true/false values.
Solution: The code shared involves a private route component and a login component. Developers were troubleshooting why the true/false values were not rendering correctly. The suggestion is to review the logic behind setting the authenticated state in the handlelogin function to ensure it functions as intended for proper session management.
TypeScript
import React, { useEffect, useState } from 'react'
import { Navigate } from 'react-router-dom'
const Privateroutes = ({component:Component,isauthenticated,...rest}) => {
console.log(isauthenticated)
useEffect(() => {
}, []);
return isauthenticated ?<Component {...rest} />:<Navigate to='/login' replace />
}
export default Privateroutes;

why it is not rendering the true false value
Recommended threads
- React Client SDK - CORS issue for Storag...
Hi I've been working on a project for a few weeks with the React Client SDK and OAuth2.0 Google login. All has been working alright, but today I've started gett...
- rror creating Appwrite user: User (role:...
I do not understand, I have tryied everything tryable to make this error go away, I have absolutely no more ideas on how should I correct this. Anything can hel...
- My projects archived. Did not see the up...
