login fully works now

frontend/src/api/client.ts

@@ -9,7 +9,6 @@ export type Client = {
 
 export const getClient = (authToken?: string): Client => {
     if (authToken) {
-        console.log(authToken)
         return {
             axios: axios.create({
                 headers: {

frontend/src/api/endpoints/AccountEndpoint.ts

@@ -0,0 +1,18 @@
+import {Client} from "../client";
+import Account from "../entities/Account";
+import Endpoint from "./Endpoint";
+
+const API_PREFIX = "/api/account/"
+
+class AccountEndpoint extends Endpoint {
+    constructor(client: Client) {
+        super(client)
+        this.requireAuthenticated()
+    }
+
+    public async getAll(): Promise<Account[]> {
+        return await this.get<Account[]>(API_PREFIX)
+    }
+}
+
+export default AccountEndpoint

frontend/src/api/entities/Account.ts

@@ -0,0 +1,10 @@
+
+type Account = {
+    id: string
+    screen_name: string
+    twitter_handle: string
+    twitter_id: string
+    avatar_url: string
+}
+
+export default Account

frontend/src/auth/AuthProvider.tsx

@@ -1,16 +1,19 @@
-import React, {FunctionComponent, useContext, useState} from "react";
+import React, {FunctionComponent, useContext, useEffect, useState} from "react";
 import AuthenticationEndpoint from "../api/endpoints/AuthenticationEndpoint";
 import {Client, getClient} from "../api/client";
 import User from "../api/entities/User";
+import {Backdrop, CircularProgress} from "@material-ui/core";
 
 type AuthState = {
     loggedIn: boolean
+    user: User|null
 
     login: (username: string, password: string) => Promise<User>
 }
 
 const emptyAuthState = {
     loggedIn: false,
+    user: null,
 
     login: async () => {
         throw "not implemented"
@@ -26,9 +29,14 @@ export const useAuth = (): AuthState => {
 type AuthProviderProps = {
 }
 
+const LOCAL_STORAGE_SESSION_TOKEN_KEY = "session_token"
+
+const initialSessionToken = localStorage.getItem(LOCAL_STORAGE_SESSION_TOKEN_KEY)
 
 const AuthProvider: FunctionComponent<AuthProviderProps> = ({children}) => {
-    const [client, setClient] = useState<Client>(getClient())
+    const [loading, setLoading] = useState<boolean>(true)
+
+    const [client, setClient] = useState<Client>(getClient(initialSessionToken ? initialSessionToken : undefined))
     const authenticationEndpoint = new AuthenticationEndpoint(client)
 
     const [authState, setAuthState] = useState<AuthState>({
@@ -41,21 +49,58 @@ const AuthProvider: FunctionComponent<AuthProviderProps> = ({children}) => {
             })
 
             // local new client
-            console.log(response)
             const tmpClient = getClient(response.token)
             setClient(tmpClient)
 
+            localStorage.setItem(LOCAL_STORAGE_SESSION_TOKEN_KEY, response.token);
+
             // local new authenticationEndpoint
             const tmpAuthenticationEndpoint = new AuthenticationEndpoint(tmpClient)
-            return await tmpAuthenticationEndpoint.getUser()
+            const user = await tmpAuthenticationEndpoint.getUser()
+
+            setAuthState({
+                ...authState,
+                loggedIn: true,
+                user: user
+            })
+
+            return user
         }
     })
 
-    return (
-        <AuthContext.Provider value={authState}>
-            {children}
-        </AuthContext.Provider>
-    )
+    useEffect(() => {
+        if (initialSessionToken) {
+            authenticationEndpoint.getUser()
+                .then(user => {
+                    setAuthState({
+                        ...authState,
+                        loggedIn: true,
+                        user: user
+                    })
+                    setLoading(false)
+                })
+                .catch(_ => {
+                    localStorage.removeItem(LOCAL_STORAGE_SESSION_TOKEN_KEY);
+                    setLoading(false)
+                })
+        } else {
+            setLoading(false)
+        }
+    }, [])
+
+    if (loading) {
+        return (
+            <Backdrop open={true}>
+                <CircularProgress color="inherit" />
+            </Backdrop>
+        )
+    } else {
+        return (
+            <AuthContext.Provider value={authState}>
+                {children}
+            </AuthContext.Provider>
+        )
+    }
 }
 
 export default AuthProvider

frontend/src/components/Login/index.tsx

@@ -5,6 +5,7 @@ import {TextField} from "formik-material-ui";
 import {useAuth} from "../../auth/AuthProvider";
 import * as yup from "yup"
 import {useState} from "react";
+import {useHistory} from "react-router-dom";
 
 type LoginFormProps = {
     username: string
@@ -19,13 +20,15 @@ const LoginFormValidationSchema = yup.object({
 const Login = () => {
 
     const auth = useAuth()
+    const history = useHistory()
+
     const [error, setError] = useState<string|null>(null)
 
     const onSubmit = async (values: LoginFormProps, helper: FormikHelpers<LoginFormProps>) => {
-        console.log(values)
         try {
             const user = await auth.login(values.username, values.password)
             console.log(user)
+            history.push("/");
         } catch (e) {
             helper.setSubmitting(false)
             setError("Login failed!")