He creado un sistema de registro usando Firebase Auth y quiero proteger las rutas para que solo puedan ser accesibles a usuarios «loggeados».
He dividido mi proyecto en los componentes de «loggeo» y registro y mi archivo de «routes» (donde especifico mis rutas y autentico y/o registro usuarios).
Este es mi archivo Signin donde envío todos los datos recolectados en el formulario a mi archivo routes por medio de props
.
export default class FormularioSignin extends Component {
EmailRef = React.createRef();
PassRef = React.createRef();
signinPost = (e) => {
e.preventDefault();
const postSignin = {
email: this.EmailRef.current.value,
pass: this.PassRef.current.value
};
console.log(postSignin)
this.props.signinPost(postSignin)
}
render() {
return (
<div className="background">
<div className="signin-card">
<div className="row">
<form className="col s12" onSubmit={this.signinPost}>
<div className="row center">
<Avatar />
<div className="input-field col s12">
<input type="text" ref={this.EmailRef} id="email" className="validate" />
<label htmlFor="email">Email</label>
</div>
<div className="input-field col s12">
<input ref={this.PassRef} type="password" id="password" className="validate" />
<label htmlFor="password">Password</label>
</div>
<label>
<input type="checkbox" />
<span>Mantener sesion iniciada</span>
</label>
</div>
<div className="btn-div center">
<button type="submit" className="waves-effect waves-light btn btn-log">Signin</button>
<p>
No account?<Link to="/Signup"> Create One!!</Link>
</p>
</div>
</form>
</div>
</div>
</div>
);
}
}
En mi archivo de «routes» recibo los datos enviados desde los formularios y registro los usuarios en Firebase.
const firebaseApp = firebase.initializeApp(firebaseConfig);
console.log(firebaseApp);
export default class Router extends Component {
state = {
prevLocation: null,
Username: null,
loggedIn: false
};
signupPost = postSignup => {
console.log(postSignup);
const name = postSignup.username;
const mail = postSignup.email;
const pass = postSignup.password;
firebase
.auth()
.createUserWithEmailAndPassword(mail, pass)
.then(user => {
console.log("registrado", user);
Swal.fire({
icon: "success",
title: "Usuario Registrado",
text: name
});
User.updateProfile({
displayName: name,
photoURL: "https://example.com/jane-q-user/profile.jpg"
});
this.setState({
Username: name,
loggedIn: true
});
localStorage.setItem("User", JSON.stringify(this.state));
})
.catch(error => {
var errorMessage = error.message;
Swal.fire({
icon: "error",
title: "Oops...",
text: errorMessage
});
});
};
signinPost = postSignin => {
firebase
.auth()
.signInWithEmailAndPassword(postSignin.email, postSignin.pass)
.then(user => {
console.log("loggeado", user);
Swal.fire({
icon: "success",
title: "Bienvenido"
});
let userr = firebase.auth().currentUser;
let namee;
if (userr != null) {
namee = userr.displayName;
this.setState({
Username: namee,
loggedIn: true
});
}
})
.catch(error => {
var errorMessage = error.message;
Swal.fire({
icon: "error",
title: "Oops...",
text: errorMessage
});
});
const resul = JSON.parse(localStorage.getItem("User"));
const na = resul.Username;
console.log(na);
};
render() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<ProtectedRoute
exact
path="/dashboard"
component={Dashboard}
/>
<Route
exact
path="/signin"
render={() => {
return <FormularioSignin signinPost={this.signinPost} />;
}}
/>
<Route
exact
path="/signup"
render={() => {
return <FormularioSignup signupPost={this.signupPost} />;
}}
/>
</Switch>
</BrowserRouter>
);
}
}
Ahora, el problema es que no sé cómo proteger mi «ruta /dashboard» para que solo pueda acceder un usuario registrado.