Logging in the user upon registration

Kalo kita lihat disini ada x-auth-token

dan ketika register datanya pun sama x-auth-token nya muncul jg

Di backend ada sedikit perubahan di folder routes user.js

const auth = require("../middleware/auth");
const bcrypt = require("bcrypt");
const _ = require("lodash");
const { User, validate } = require("../models/user");
const express = require("express");
const router = express.Router();

router.get("/me", auth, async (req, res) => {
  const user = await User.findById(req.user._id).select("-password");
  res.send(user);
});

router.post("/", async (req, res) => {
  const { error } = validate(req.body);
  if (error) return res.status(400).send(error.details[0].message);

  let user = await User.findOne({ email: req.body.email });
  if (user) return res.status(400).send("User already registered.");

  user = new User(_.pick(req.body, ["name", "email", "password"]));
  const salt = await bcrypt.genSalt(10);
  user.password = await bcrypt.hash(user.password, salt);
  await user.save();

  const token = user.generateAuthToken();
  res
    .header("x-auth-token", token)
    .header("access-control-expose-headers", "x-auth-token")
    .send(_.pick(user, ["_id", "name", "email"]));
});

module.exports = router;

di baris 28 kita menambahkan 1 baris code agar di form ketika di submit muncul x-auth-token:

.header("access-control-expose-headers", "x-auth-token")

dan ubah file RegisterForm.jsx

import React from "react";
import Joi from "joi-browser";
import Form from "./Common/Form";
import * as UserService from '../services/UserService';

class RegisterForm extends Form {
    state = { 
        data: { username: "", password: "", name: "" },
        errors: {}
     };

    schema = {
        username: Joi.string().required().label("Username"),
        password: Joi.string().required().label("Password"),
        name    : Joi.string().required().label("Name")
    };

    doSubmit = async () => {
        try {
            const response = await UserService.register(this.state.data); 
            // console.log(response)
            localStorage.setItem("token", response.headers["x-auth-token"]);
            this.props.history.push("/");
        } catch (error) {
            if (error.response && error.response.status === 400) {
                const errors = { ...this.state.errors };
                errors.username = error.response.data;
                this.setState({ errors });
            }
        }
    }

    render() { 
        return (
            <>
                <div>
                    <h1>Register</h1>
                    <form onSubmit={this.handleSubmit} >
                        {this.renderInput('username', 'Username')}
                        {this.renderInput('password', 'Password', "password")}
                        {this.renderInput('name', 'Name')}
                        {this.renderButton('Register')}
                    </form>
                </div>
            </>
        );
    }
}
 
export default RegisterForm;

Maka ketika register akan di arahkan ke home

Last updated

Was this helpful?