Finalize user log-in flow (#546)

Closes #489 by revamping the log in screen.

Author: ekassos

pingpong/auth.py

@@ -82,6 +82,12 @@ def encode_auth_token(
     )
 
 
+class TimeException(Exception):
+    def __init__(self, detail: str = "", user_id: str = ""):
+        self.user_id = user_id
+        self.detail = detail
+
+
 def decode_auth_token(token: str, nowfn: NowFn = utcnow) -> AuthToken:
     """Decodes the Auth Token.
 
@@ -95,7 +101,7 @@ def decode_auth_token(token: str, nowfn: NowFn = utcnow) -> AuthToken:
     Raises:
         jwt.exceptions.PyJWTError when token is not valid
     """
-    exc: PyJWTError | None = None
+    exc: PyJWTError | TimeException | None = None
 
     for secret in config.auth.secret_keys:
         try:
@@ -115,15 +121,15 @@ def decode_auth_token(token: str, nowfn: NowFn = utcnow) -> AuthToken:
             now = nowfn().timestamp()
             nbf = getattr(tok, "nbf", None)
             if nbf is not None and now < nbf:
-                raise PyJWTError("Token not valid yet")
+                raise TimeException(detail="Token not valid yet", user_id=tok.sub)
 
             exp = getattr(tok, "exp", None)
             if exp is not None and now > exp:
-                raise PyJWTError("Token expired")
+                raise TimeException(detail="Token expired", user_id=tok.sub)
 
             return tok
 
-        except PyJWTError as e:
+        except (TimeException, PyJWTError) as e:
             exc = e
             continue
 

pingpong/server.py

@@ -28,7 +28,7 @@
 import pingpong.metrics as metrics
 import pingpong.models as models
 import pingpong.schemas as schemas
-from .auth import authn_method_for_email
+from .auth import TimeException, authn_method_for_email
 from .template import email_template as message_template
 from .time import convert_seconds
 from .saml import get_saml2_client, get_saml2_settings, get_saml2_attrs
@@ -122,8 +122,7 @@ async def parse_session_token(request: Request, call_next):
             user_id = int(token.sub)
             user = await models.User.get_by_id(request.state.db, user_id)
             if not user:
-                raise ValueError("User does not exist")
-
+                raise ValueError("We couldn't locate your account.")
             # Modify user state if necessary
             if user.state == schemas.UserState.UNVERIFIED:
                 await user.verify(request.state.db)
@@ -135,6 +134,11 @@ async def parse_session_token(request: Request, call_next):
                 user=user,
                 profile=schemas.Profile.from_email(user.email),
             )
+        except TimeException as e:
+            request.state.session = schemas.SessionState(
+                status=schemas.SessionStatus.INVALID,
+                error=e.detail,
+            )
         except PyJWTError as e:
             request.state.session = schemas.SessionState(
                 status=schemas.SessionStatus.INVALID,
@@ -506,6 +510,17 @@ async def auth(request: Request):
         auth_token = decode_auth_token(stok, nowfn=nowfn)
     except jwt.exceptions.PyJWTError as e:
         raise HTTPException(status_code=401, detail=str(e))
+    except TimeException as e:
+        user = await models.User.get_by_id(request.state.db, int(e.user_id))
+        forward = request.query_params.get("redirect", "/")
+        if user and user.email:
+            await login_magic(
+                schemas.MagicLoginRequest(email=user.email, forward=forward), request
+            )
+            return RedirectResponse("/login/?new_link=true", status_code=303)
+        return RedirectResponse(
+            f"/login/?expired=true&forward={forward}", status_code=303
+        )
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 

pingpong/test_server.py

@@ -65,7 +65,7 @@ async def test_me_with_valid_token_but_missing_user(api, now):
     )
     assert response.status_code == 200
     assert response.json() == {
-        "error": "User does not exist",
+        "error": "We couldn't locate your account.",
         "profile": None,
         "status": "error",
         "token": None,
@@ -160,9 +160,9 @@ async def test_auth_with_invalid_token(api):
 
 async def test_auth_with_expired_token(api, now):
     expired_token = encode_session_token(123, nowfn=offset(now, seconds=-100_000))
-    response = api.get(f"/api/v1/auth?token={expired_token}")
-    assert response.status_code == 401
-    assert response.json() == {"detail": "Token expired"}
+    response = api.get(f"/api/v1/auth?token={expired_token}", allow_redirects=False)
+    assert response.status_code == 303
+    assert response.headers["location"] == "/login/?expired=true&forward=/"
 
 
 @with_user(123, "foo@bar.com")

web/pingpong/src/routes/login/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import PingPongLogo from '$lib/components/PingPongLogo.svelte';
-  import { Button, P, InputAddon, Input, Helper, Heading, ButtonGroup } from 'flowbite-svelte';
+  import { Button, InputAddon, Input, Heading, ButtonGroup } from 'flowbite-svelte';
   import { EnvelopeSolid } from 'flowbite-svelte-icons';
   import { writable } from 'svelte/store';
   import { fail } from '@sveltejs/kit';
@@ -10,6 +10,8 @@
 
   export let form;
   const forward = $page.url.searchParams.get('forward') || '/';
+  const expired = $page.url.searchParams.get('expired') === 'true' || false;
+  const new_link = $page.url.searchParams.get('new_link') === 'true' || false;
   const loggingIn = writable(false);
   const success = writable(false);
   const loginWithMagicLink = async (evt: SubmitEvent) => {
@@ -41,13 +43,43 @@
     <header class="bg-blue-dark-40 px-5 md:px-12 py-8">
       <Heading tag="h1" class="logo w-full text-center"><PingPongLogo size="full" /></Heading>
     </header>
-    <div class="px-5 md:px-12 py-16 bg-white">
+    <div class="px-5 md:px-12 pb-16 pt-10 bg-white">
       {#if $success}
-        <div class="text-orange">Success! Follow the link in your email to finish signing in.</div>
+        <div class="text-4xl text-center font-serif font-bold mt-5 mb-2 text-blue-dark-50">
+          Success!
+        </div>
+        <div class="text-lg text-center">Follow the link in your email to finish signing in.</div>
+      {:else if new_link}
+        <div class="text-4xl text-center font-serif font-bold mt-5 mb-4 text-blue-dark-50">
+          Let's try this again.
+        </div>
+        <div class="text-lg text-center">
+          This log-in link isn't currently valid.<br />We sent a new link to your email.
+        </div>
       {:else}
+        <div class="mb-6">
+          {#if expired}
+            <div class="text-4xl text-center font-serif font-bold mb-2 text-blue-dark-50">
+              Let's try this again.
+            </div>
+            <div class="text-lg text-center">
+              This log-in link isn't currently valid.<br />Try logging in with your school email
+              address again.
+            </div>
+          {:else}
+            <div class="text-4xl text-center font-serif font-bold mb-2 text-blue-dark-50">
+              {form?.error ? 'We could not sign you in.' : 'Welcome to PingPong'}
+            </div>
+            <div class="text-lg text-center">
+              {form?.error
+                ? 'Please make sure you are using the correct email address and try again.'
+                : 'Use your school email address to log in.'}
+            </div>
+          {/if}
+        </div>
         <form on:submit={loginWithMagicLink}>
           <ButtonGroup class="w-full rounded-full bg-blue-light-50 shadow-inner p-4">
-            <InputAddon class="rounded-none border-none bg-transparent text-blue-light-40">
+            <InputAddon class="rounded-none border-none bg-transparent text-blue-dark-30">
               <EnvelopeSolid />
             </InputAddon>
             <Input
@@ -57,25 +89,15 @@
               placeholder="you@school.edu"
               name="email"
               id="email"
-              class="bg-transparent border-none"
+              class="bg-transparent border-none text-md"
             ></Input>
             <Button
               pill
-              class="p-3 px-6 mr-2 rounded-full bg-orange text-white hover:bg-orange-dark"
+              class="p-3 px-6 mr-2 rounded-full bg-orange-dark hover:bg-orange text-white text-md py-2 px-4"
               type="submit"
               disabled={$loggingIn}>Login</Button
             >
           </ButtonGroup>
-          {#if form?.error}
-            <div class="p-2">
-              <P class="text-orange">We could not sign you in.</P>
-              <P class="text-orange"
-                >Please make sure you are using the correct email address and try again.
-              </P>
-            </div>
-          {:else}
-            <Helper class="my-2 text-black text-sm">Log in with your school email address.</Helper>
-          {/if}
         </form>
       {/if}
     </div>