🥅 Catching OAuth-errors

classquiz/oauth/github.py

@@ -3,7 +3,7 @@ from typing import Optional
 import authlib.integrations.base_client
 from fastapi import APIRouter, Request, HTTPException, Response
 from classquiz.config import settings
-
+from fastapi.responses import RedirectResponse
 from classquiz.db.models import User, UserAuthTypes
 from pydantic import BaseModel
 from classquiz.auth import check_token
@@ -26,6 +26,7 @@ class Plan(BaseModel):
 class GitHubOauthResponse(BaseModel):
     login: str
     id: int
+    email: Optional[str]
     node_id: Optional[str]
     avatar_url: Optional[str]
     gravatar_id: Optional[str]
@@ -46,7 +47,6 @@ class GitHubOauthResponse(BaseModel):
     company: Optional[str]
     blog: Optional[str]
     location: Optional[str]
-    email: str
     hireable: Optional[bool]
     bio: Optional[str]
     twitter_username: Optional[str]
@@ -92,9 +92,11 @@ async def auth(request: Request, response: Response):
     try:
         token = await oauth.github.authorize_access_token(request)
     except authlib.integrations.base_client.OAuthError:
-        raise HTTPException(status_code=401, detail="The OAuth didn't work! :(")
+        return RedirectResponse("/account/oauth-error")
     resp = await oauth.github.get("user", token=token)
     user_data = GitHubOauthResponse(**resp.json())
+    if user_data.email is None:
+        return RedirectResponse("/account/oauth-error?error=email")
     user_in_db = await User.objects.get_or_none(email=user_data.email)
     if user_in_db is None:
         # REGISTER USER

frontend/src/routes/account/oauth-error.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" context="module">
+	export async function load({ url }) {
+		const error = url.searchParams.get('error');
+		return {
+			props: {
+				error
+			}
+		};
+	}
+</script>
+
+<script lang="ts">
+	export let error: string;
+</script>
+
+<div>
+	<div class="flex justify-center w-full">
+		<h1 class="text-6xl">Error authenticating</h1>
+	</div>
+
+	<div class="flex justify-center w-full pt-10">
+		<p>
+			{#if error === 'email'}
+				GitHub didn't respond with an email-address. Are you sure your email-address is
+				verified?
+			{:else}
+				There was an error authenticating you. Are you sure you've got an email? Is the
+				Email verified?
+			{/if}
+		</p>
+	</div>
+	<div class="flex justify-center w-full pt-10">
+		<a
+			href="/account/login"
+			class="px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+		>
+			Go back to login-page
+		</a>
+	</div>
+	<div class="flex justify-center w-full pt-10">
+		<p>
+			If the error persists, please open an <a
+				href="https://github.com/mawoka-myblock/ClassQuiz/issues/new?assignees=&labels=&template=Bug_report.md"
+				class="underline transition hover:text-blue-300">issue on GitHub</a
+			>.
+		</p>
+	</div>
+</div>