Merge pull request #371 from cloudflare/sven/fix-login

use OAuth endpoint for UI

frontend/src/components/layout/RightColumn/RightColumn.tsx

@@ -1,7 +1,7 @@
 import { component$ } from '@builder.io/qwik'
 import { Link, useLocation } from '@builder.io/qwik-city'
 import { WildebeestLogo } from '~/components/MastodonLogo'
-import { accessLoader } from '~/routes/layout'
+import { authLoader } from '~/routes/layout'
 
 type LinkConfig = {
 	iconName: string
@@ -11,7 +11,7 @@ type LinkConfig = {
 }
 
 export default component$(() => {
-	const accessData = accessLoader().value
+	const { isAuthorized, loginUrl } = authLoader().value
 	const location = useLocation()
 
 	const renderNavLink = ({ iconName, linkText, linkTarget, linkActiveRegex }: LinkConfig) => {
@@ -55,15 +55,15 @@ export default component$(() => {
 					{renderNavLink(aboutLink)}
 				</div> */}
 
-				{!accessData.isAuthorized && (
+				{!isAuthorized && (
 					<a
 						class="w-full block mb-4 no-underline text-center bg-wildebeest-vibrant-600 hover:bg-wildebeest-vibrant-500 p-2 text-white text-uppercase border-wildebeest-vibrant-600 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
-						href={accessData.loginUrl}
+						href={loginUrl}
 					>
 						Sign in
 					</a>
 				)}
-				{accessData.isAuthorized && (
+				{isAuthorized && (
 					<a class="text-semi no-underline" href="/settings/migration">
 						<i class="fa fa-gear mx-3 w-4" />
 						Preferences

frontend/src/routes/(admin)/oauth/authorize/index.tsx

@@ -21,7 +21,7 @@ export const clientLoader = loader$<Promise<Client>>(async ({ platform, query, h
 		throw html(500, getErrorHtml('An error occurred while trying to fetch the client data, please try again later'))
 	}
 	if (client === null) {
-		throw new Error('client not found')
+		throw html(500, getErrorHtml('client not found'))
 	}
 	return client
 })

frontend/src/routes/layout.tsx

@@ -1,24 +1,28 @@
 import { component$, Slot } from '@builder.io/qwik'
 import { loader$ } from '@builder.io/qwik-city'
-import * as access from 'wildebeest/backend/src/access'
 import { checkAuth } from '~/utils/checkAuth'
 
-type AccessLoaderData = {
+type AuthLoaderData = {
 	loginUrl: string
 	isAuthorized: boolean
 }
 
-export const accessLoader = loader$<Promise<AccessLoaderData>>(async ({ platform, request, cookie }) => {
+export const authLoader = loader$<Promise<AuthLoaderData>>(async ({ platform, request, cookie }) => {
 	const jwt = cookie.get('CF_Authorization')?.value ?? ''
 	const isAuthorized = await checkAuth(request, jwt, platform.ACCESS_AUTH_DOMAIN, platform.ACCESS_AUD)
+	// FIXME(sven): remove hardcoded value
+	const UI_CLIENT_ID = '924801be-d211-495d-8cac-e73503413af8'
+	const params = new URLSearchParams({
+		redirect_uri: request.url,
+		response_type: 'code',
+		client_id: UI_CLIENT_ID,
+		scope: 'all',
+	})
+	const loginUrl = new URL('/oauth/authorize?' + params, 'https://' + platform.DOMAIN)
 
 	return {
 		isAuthorized,
-		loginUrl: access.generateLoginURL({
-			redirectURL: request.url,
-			domain: platform.ACCESS_AUTH_DOMAIN,
-			aud: platform.ACCESS_AUD,
-		}),
+		loginUrl,
 	}
 })