DNY client (4 – Signing in) | Chinese Rule of Eight

We first create a sign in page routing in our MainRouter. It routes to component Signin

src/MainRouter.js

import React from 'react'

import {Route, Switch} from 'react-router-dom'

import Home from './core/Home'

import Signup from './user/Signup'

import Signin from './user/Signin'

const MainRouter = () => (

<div>

</Switch>

</div>

)

export default MainRouter;

We then create component Signin. It has email and password for the user to sign in with. The error is required for erroneous situations and the redirect to a specific referer page.

src/user/Signin.js

import React, { Component } from 'react';

import {Redirect} from 'react-router-dom';

export class Signin extends Component {

constructor() {

super()

this.state = {

email: "",

password: "",

error: "",

redirectToReferer: false,

}

handleChange = (name) => (event) => {

this.setState({ error : "" })

this.setState({ [name] : event.target.value })

}

We have an authenticate function that gets the jwt token and stores it into local storage. We store the token value on key ‘jwt’.

But before we do so, we need to make sure the window object exists.
Once the token is set, we set the referer to yes.

authenticate(jwt, next) {

if (typeof window !== 'undefined') {

localStorage.setItem("jwt", JSON.stringify(jwt))

next()

}

Once the user clicks submit, we sign by passing in the email and password. We stringify that data and put it in the body of our POST request to http://localhost:8080/signin.

When successful, we should then get the response with token and some data. We then put this token into the localstorage and set the our redirect to yes so that we redirect to the homepage.

clickSubmit = event => {

event.preventDefault()

const { email, password } = this.state

const user = { email, password }

this.signin(user)

.then(data => {

if (data.error) {

this.setState({ error: data.error })

} else {

// 1) authenticate

this.authenticate(data.token, () => {

// 2) redirect to profile page

this.setState({ redirectToReferer: true})

})

}

})

}

signin = user => {

return fetch('http://localhost:8080/signin', {

method: "POST",

mode: "cors",

headers: {

Accept : "application/json",

"Content-Type": "application/json",

'Access-Control-Allow-Origin':'*'

body: JSON.stringify(user),

})

.then(response => {

return response.json()

})

.catch(err => {

return err

})

}

renderSignInForm = (email, password) => {

return (<form>

<label className="text-muted">Email</label>

<input

onChange={this.handleChange("email")}

type="email"

className="form-control"

value={email}

</div>

<label className="text-muted">Password</label>

<input

onChange={this.handleChange("password")}

type="password "

className="form-control"

value={password}

</div>

<button onClick={this.clickSubmit} className="btn btn-raised btn-primary">submit</button>

</form>);

}

render() {

const { email, password, error, redirectToReferer} = this.state

if (redirectToReferer) {

return <Redirect to="/" />

}

if (email) console.log('email', email)

if (password) console.log('password', password)

if (error) console.log('error', error)

if (redirectToReferer) console.log('redirectToReferer', redirectToReferer)

return (

{error}

</div>

{this.renderSignInForm(email, password)}

</div>

);

}

export default Signin

Before you sign in, clear your localStorage first by opening up Inspect Element, then click on the Application tab. On the left-hand side, you’ll see a clearStorage. Click on it to clear any key/values stores previously.

Now, on the left-hand side, make sure you’re still on the Application tab click on the localhost URL. On your browser navigate to localhost:3000/signin. Then sign in using correct credentials. You’ll see that the key/value will be updated with the token given by the server. This is so that whenever you make future requests, you’ll be using this token with each request. The server will verify it and thus authenticate your requests.

After the successful sign in, you’ll be redirected to the home page.