0

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.

1 respuesta 1

0

En un proyecto me toco meter mano a algo como lo que necesitas y estaba de esta manera:

<BrowserRouter>
  <Switch>
    <Route path="/signin" exact component={Auth} />
    <PrivateRoute path="/dashboard" auth={auth} component={Dashboard} />
  </Switch>
</BrowserRouter>

En otro archivo se crea otro el componente PrivateRoute const PrivateRoute = (props) => { const {isAuthenticated } = props.path

  if (isAuthenticated) {
    return <Route {...props} /> // haciendo esto se pasa el prop `path`, `auth` y `component`
  }

  return <Redirect to="/signin" />
}

Si miras es una simple validacion, si esta autenticado o tiene una sesion activa o la validacion quieras, te manda a esa ruta y si no te regresa al componente que quieras, en el ejemplo a la ruta "/signing". Es algo sencillo y simple y funciona, es una opcion, si alguien tiene una mejor estaria genial ver ese approach.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.