Back
Appwrite is using localStorage for session management. Increase your security by adding a custom dom
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
