Not working right - too tired right now

client/components/app.jsx

@@ -22,6 +22,7 @@ const App = props => {
 					<LazyRoute exact path='/' component={() => import('./pages/homepage')} />
 
 					<LazyRoute path='/signup' component={() => import('./pages/signup')} />
+					<LazyRoute path='/login' component={() => import('./pages/login')} />
 
 					<LazyRoute path='/privacypolicy' component={async () => () => <Markdown content={require('../markdown/privacy-policy.md').default} />} />
 					<LazyRoute path='/credits' component={async () => () => <Markdown content={require('../markdown/credits.md').default} />} />

client/components/pages/login.jsx

@@ -0,0 +1,88 @@
+import React, { useState, useRef } from 'react';
+import { Redirect } from 'react-router-dom';
+
+import { setToken, getToken } from '../../utilities/token-client';
+
+const LogIn = props => {
+	//if logged in
+	const [tok, setTok] = useState(null);
+
+	getToken()
+		.then(token => setTok(token))
+		.catch(e => console.error(e))
+	;
+
+	if (tok) {
+		return <Redirect to='/' />;
+	}
+
+	//refs
+	const emailRef = useRef();
+	const passwordRef = useRef();
+
+	return (
+		<div className='page'>
+			<h1 className='centered'>Login</h1>
+			<form className='constricted' onSubmit={
+				async evt => {
+					//on submit
+					evt.preventDefault();
+					const [result, redirect] = await handleSubmit(emailRef.current.value, passwordRef.current.value);
+					if (result) {
+						alert(result);
+					}
+
+					//redirect
+					if (redirect) {
+						props.history.push('/');
+					}
+				}
+			}>
+				<div>
+					<label htmlFor="email">Email:</label>
+					<input type="email" name="email" ref={emailRef} />
+				</div>
+
+				<div>
+					<label htmlFor="password">Password:</label>
+					<input type="password" name="password" ref={passwordRef} />
+				</div>
+
+				<button type='submit'>Login</button>
+			</form>
+		</div>
+	);
+};
+
+//DOCS: returns two values: response and OK
+const handleSubmit = async (email, password) => {
+	email = email.trim(); //TODO: validate email on login
+
+	//send to the auth server
+	const result = await fetch(`${process.env.AUTH_URI}/login`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			'Access-Control-Allow-Origin': '*'
+		},
+		body: JSON.stringify({
+			email,
+			password,
+		})
+	});
+
+	if (!result.ok) {
+		const err = `${result.status}: ${await result.text()}`;
+		console.error(err);
+		return [err, false];
+	}
+
+	//save the auth tokens
+	const authTokens = await result.json();
+
+	await setToken(authTokens.accessToken, authTokens.refreshToken);
+
+	return [null, true];
+};
+
+export default LogIn;

client/components/pages/signup.jsx

@@ -1,11 +1,24 @@
-import React, { useRef } from 'react';
+import React, { useState, useRef } from 'react';
+import { Redirect } from 'react-router-dom';
+
+import { getToken } from '../../utilities/token-client';
 
 //utilities
 const validateEmail = require('../../../common/utilities/validate-email.js');
 const validateUsername = require('../../../common/utilities/validate-username.js');
 
 const SignUp = props => {
-	//TODO: redirect if logged in
+	//if logged in
+	const [tok, setTok] = useState(null)
+
+	getToken()
+		.then(token => setTok(token))
+		.catch(e => console.error(e))
+	;
+
+	if (tok) {
+		return <Redirect to='/' />;
+	}
 
 	//refs
 	const emailRef = useRef();
@@ -18,18 +31,14 @@ const SignUp = props => {
 		<div className='page'>
 			<h1 className='centered'>Signup</h1>
 			<form className='constricted' onSubmit={
-				async evt => {
-					//on submit
+				async evt => { //on submit
 					evt.preventDefault();
-					const [redirect, result] = await handleSubmit(emailRef.current.value, usernameRef.current.value, passwordRef.current.value, retypeRef.current.value, contactRef.current.checked);
+					const [result, redirect] = await handleSubmit(emailRef.current.value, usernameRef.current.value, passwordRef.current.value, retypeRef.current.value, contactRef.current.checked);
 					if (result) {
 						alert(result);
 					}
 
-					//cleanup & redirect
-					emailRef.current.value = usernameRef.current.value = passwordRef.current.value = retypeRef.current.value = ''; //clear input
-					contactRef.current.checked = false;
-
+					//redirect
 					if (redirect) {
 						props.history.push('/');
 					}
@@ -94,10 +103,10 @@ const handleSubmit = async (email, username, password, retype, contact) => {
 	if (!result.ok) {
 		const err = `${result.status}: ${await result.text()}`;
 		console.error(err);
-		return [false, err];
+		return [err, false];
 	}
 
-	return [true, await result.text()];
+	return [await result.text(), true];
 };
 
 //returns an error message, or null on success

client/components/panels/header.jsx

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
+import { getToken, getRefreshToken, clearToken } from '../../utilities/token-client';
+
 const Visitor = () => {
 	return (
 		<div>
@@ -22,19 +24,41 @@ const Member = () => {
 };
 
 const logout = async () => {
-	//TODO: update API
-	await fetch('/api/accounts/logout', { method: 'POST' })
-		.catch(e => console.error(e))
-	;
+	console.log('loging out')
+	const token = getToken();
+
+	//send to the auth server
+	const result = await fetch(`${process.env.AUTH_URI}/logout`, {
+		method: 'DELETE',
+		headers: {
+			'Content-Type': 'application/json',
+			'Access-Control-Allow-Origin': '*',
+			'Authorization': `Bearer ${token}`
+		},
+		body: JSON.stringify({
+			token: getRefreshToken()
+		})
+	});
+
+	if (result.ok) {
+		await clearToken();
+	} else {
+		console.error(await result.text());
+	}
 };
 
 const Header = () => {
-	let Options = Visitor;
+	const [tok, setTok] = useState(null);
+
+	getToken()
+		.then(token => setTok(token))
+		.catch(e => console.error(e))
+	;
 
 	return (
 		<header>
 			<h1><Link to='/'>MERN Template</Link></h1>
-			<Options />
+			{ tok ? <Member /> : <Visitor /> }
 		</header>
 	);
 };

client/utilities/token-client.js

@@ -0,0 +1,62 @@
+import decode from 'jwt-decode';
+import Cookies from 'universal-cookie';
+
+export async function setToken(access, refresh) {
+	const cookies = new Cookies();
+	cookies.set('access', access, { path: '/' });
+	cookies.set('refresh', refresh, { path: '/' });
+};
+
+export async function getToken() {
+	const cookies = new Cookies();
+
+	try {
+		const access = cookies.get('access');
+		const refresh = cookies.get('refresh');
+
+		if (!access || !refresh) {
+			return null;
+		}
+
+		//if expired, refresh
+		if (new Date(decode(access).exp * 1000) < Date.now()) {
+			const result = await fetch(`${process.env.AUTH_URI}/token`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'Access-Control-Allow-Origin': '*'
+				},
+				body: JSON.stringify({
+					token: refresh
+				})
+			});
+
+			const authTokens = await result.json();
+
+			await setToken(authTokens.accessToken, authTokens.refreshToken);
+
+			return authTokens.accessToken;
+		} else {
+			return access;
+		}
+	}
+	catch (e) {
+		console.error(e);
+		return null;
+	}
+};
+
+export async function getRefreshToken() {
+	const cookies = new Cookies();
+
+	const refresh = cookies.get('refresh');
+
+	return refresh || null;
+};
+
+export async function clearToken() {
+	const cookies = new Cookies();
+
+	cookies.remove('access');
+	cookies.remove('refresh');
+}