dnyNodeAPI-basic-site
npm install to install all node modules
Then, npm run dev to run the server
dny-client-basic-site
npm install to install all node modules
Then, npm run start to run the client
So far we have a basic site with these functionalities:
Create a user
POST on http://localhost:8080/signup
body: JSON.stringify(user)
src/auth/index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
export const SignUpUser = user => { return fetch('http://localhost:8080/signup', { 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 }) } |
src/user/Signup.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
clickSubmit = event => { event.preventDefault() const { name, email, password } = this.state const user = { name, email, password } SignUpUser(user) .then(data => { console.log('data', data) if (data.error) { this.setState({ error: data.error }) } else { this.setState({ name: "", email: "", password: "", error: "", open: true }) } }) } |
When the user successfully creates an account, we will show a link to sign in.
Authenticate a user
POST on http://localhost:8080/signin
body: JSON.stringify(user)
We first use the email and password to try to get user user data and a token back, which are both packaged into a object called ‘data’. Once we get the data, we pass it into AuthenticateUser, which will store it via localStorage at property ‘jwt’. Thus, we can always access the value at property ‘jwt’. We get this value, which has properties token and user, which we can use.
src/user/Signup.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
clickSubmit = event => { event.preventDefault() this.setState({ loading: true }) const { email, password } = this.state const user = { email, password } SignInUser(user).then(data => { this.setState({loading:false}) if (data.error) { this.setState({ error: data.error }) } else { console.log('Signin.js - let authenticate it') console.log('data received is: ', data) // 1) authenticate AuthenticateUser(data, () => { // 2) redirect to profile page this.setState({ redirectToReferer: true}) }) } }) } |
Once we get the token and user data successfully into the localStorage, we redirect to the main page.
The main page’s component is Home
Also, we have a Menu for navigation and showing/hiding of links according to authentication.
Menu
Basically, we use IsAuthenticated to read localStorage’s jwt value. If it’s available, we show what we want to show, like the sign-out link, user’s name, id.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
{!IsAuthenticated() && ( <> <li className="nav-item"> <Link className="nav-link" style={isActive(history, "/signin")} to="/signin">Sign In</Link> </li> <li className="nav-item"> <Link className="nav-link" style={isActive(history, "/signup")} to="/signup">Sign Up</Link> </li> </>)} {IsAuthenticated() && ( <> <li className="nav-item"> <a className="nav-link" style={(isActive(history, "/signout"), {cursor: "pointer" })} onClick={() => SignOutUser( () => history.push('/') )} > Sign Out </a> </li> <li className="nav-item"> <Link className="nav-link" to={`/user/${IsAuthenticated().user._id}`} style={isActive(history, `/user/${IsAuthenticated().user._id}`)} > {`${IsAuthenticated().user.name}'s profile`} </Link> </li> </>)} |
User Profile
GET on http://localhost:8080/user/${userId}
The main idea is that we must give the userId so the backend knows which user to fetch. We also need to give a token so that the backend can authenticate it.
There is a situation where if you’re on someone else’s (say tom’s) profile, and you click on the user profile (john) link in the Menu, the Profile’s component render function will be called first, which will fetch and render tom’s data again. But soon after, your click on john’s profile link will trigger john’s data to be fetched also. Hence, there will two fetches.
Edit user profile
PUT on http://localhost:8080/user/${userId}
body: user
Editing is basically about updating the user on the backend.
|
1 2 3 4 5 6 7 8 9 10 |
UpdateUser(userId, token, this.userData).then(data => { if (data.error) { this.setState({ error: data.error, loading: false }) } else { updateLocalStorageUser(data, () => { this.setState({ redirectToProfile: true, loading: false }) }) } }) |
Once we update the user, we must remember to update the localStorage with the latest retrieved user data.
Delete user profile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
removeUser(userId, token) .then(data => { if (data.error) { console.log(data.error) } else { // signout user // we provide callback for next() in SignOutUser SignOutUser( () => console.log('User is deleted')) ; // redirect this.setState({ redirect: true }); } }) |
removeUser does a fetch for Delete on http://localhost:8080/user/${userId}
where SignOutUser does a fetch for GET on http://localhost:8080/signout
Here, we tell the backend to clear cookie for this particular client. Cookies are stored per-user on the user’s machine. A cookie is usually just a bit of information. Cookies are usually used for simple user settings colours preferences ect. No sensitive information should ever be stored in a cookie.
View all users
GET on http://localhost:8080/users
