how to hide the email in url?

Question

I'm trying to create this register page where the email is shown in url path. I want the email to not show in the url path. Right now, I have a email check page where it checks if the email is present in the database or not. If it is not present in db then it goes to the registration page where the user just enters the username and password and the email is already taken from the email check page using useParams. However I don't want the email to not show in the url, is it because of props.history.push(`/register2/${email}`);?

my code looks something like this.

the email check api call function

const url = "/api/emailcheck";
    try {
      const response = await fetch(url, options);
      const text = await response.text();
      console.log(text);
      if (text === "does not exist") {
        props.history.push(`/register2/${email}`);

the registration page where the user enters username and password

import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import Link from "@material-ui/core/Link";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
import { withRouter, useParams } from "react-router-dom";

const useStyles = makeStyles(theme => ({
  paper: {
    marginTop: theme.spacing(8),
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  form: {
    width: "100%",
    marginTop: theme.spacing(3)
  },
  submit: {
    margin: theme.spacing(3, 0, 2)
  }
}));

function Reg2(props) {
  const classes = useStyles();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const { email } = useParams();

  const performRegister = async event => {
    event.preventDefault();
    var body = {
      username: username,
      password: password,
      email: email
    };
    console.log(body);
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: JSON.stringify(body)
    };
    const url = "/api/register";
    try {
      const response = await fetch(url, options);
      const text = await response.text();
      if (text === "verifyemail") {
        props.history.push(`/verifyOtp/${email}`);
      } else {
        window.alert("registration failed");
      }
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Typography component="h1" variant="h5">
          Enter Details
        </Typography>
        <form className={classes.form} noValidate onSubmit={performRegister}>
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <TextField
                name="username"
                onChange={e => setUsername(e.target.value)}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                fullWidth
                name="password"
                type="password"
                onChange={e => setPassword(e.target.value)}
              />
            </Grid>
          </Grid>
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Register
          </Button>
        </form>
      </div>
    </Container>
  );
}
export default withRouter(Reg2);

app.js

function App() {
  return (
    <>
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route path="/register" component={Reg} />
          <Route path="/register2/:email?" component={Reg2} />
          <Route path="/Editor" component={Editor} />
          <Route path="/verifyOtp/:email?" component={VerifyOTP} />
        </Switch>
      </Router>
    </>
  );
}

Instead of putting the email in the route (and thus the visible URL), check it using AJAX/fetch in the background, then redirect the user based on the result. — , Jan 12 '20 at 15:06
Does this answer your question? [How to pass params with history.push/Link/Redirect in react-router v4?](https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-link-redirect-in-react-router-v4) — , Jan 12 '20 at 15:18
best way: encrypt the email address and decrypt in the server; simple way: md5 hash the email — balexandre, Jan 12 '20 at 15:28
@balexandre is there any guide or tutorial to show how to do this? I'm not the backend guy so I don't know how to do this — henrydoe, Jan 12 '20 at 15:37
Could you assign the email address as a variable on window? i.e. window.something_namespaced_email = 'user@example.com' This should persist after the route has changed. — peteredhead, Jan 12 '20 at 18:38

how to hide the email in url?

0 Answers0