Implement (optional) SSO via OIDC (OpenID Connect) (#64)

This implements optional SSO via OIDC for logging in and signing up (for the first admin sign up or if sign up is allowed). The most requested feature!

Tested with Authentik and Google!

It includes a new `SimpleCache` interface (in-memory, using [`caches`](https://developer.mozilla.org/en-US/docs/Web/API/Window/caches)) for storing the state and code challenges.

Closes #13
This commit is contained in:
Bruno Bernardino
2025-06-05 18:10:40 +01:00
committed by GitHub
parent cabc18f15d
commit aa18dcdb4e
14 changed files with 490 additions and 22 deletions

View File

@@ -9,6 +9,7 @@ import { FreshContextState } from '/lib/types.ts';
import { AppConfig } from '/lib/config.ts';
import { isMultiFactorAuthEnabledForUser } from '/lib/utils/multi-factor-auth.ts';
import { MultiFactorAuthModel } from '/lib/models/multi-factor-auth.ts';
import { OidcModel } from '/lib/models/oidc.ts';
import PasswordlessPasskeyLogin from '/islands/auth/PasswordlessPasskeyLogin.tsx';
interface Data {
@@ -18,6 +19,8 @@ interface Data {
formData?: FormData;
isEmailVerificationEnabled: boolean;
isMultiFactorAuthEnabled: boolean;
isSingleSignOnEnabled: boolean;
singleSignOnUrl?: string;
helpEmail: string;
}
@@ -29,7 +32,13 @@ export const handler: Handlers<Data, FreshContextState> = {
const isEmailVerificationEnabled = await AppConfig.isEmailVerificationEnabled();
const isMultiFactorAuthEnabled = await AppConfig.isMultiFactorAuthEnabled() && await UserModel.isThereAnAdmin();
const helpEmail = (await AppConfig.getConfig()).visuals.helpEmail;
const isSingleSignOnEnabled = await AppConfig.isSingleSignOnEnabled();
const config = await AppConfig.getConfig();
const helpEmail = config.visuals.helpEmail;
const singleSignOnUrl = isSingleSignOnEnabled
? (await OidcModel.getSignInUrl({ requestPermissions: config.auth.singleSignOnScopes }))
: undefined;
const searchParams = new URL(request.url).searchParams;
@@ -54,7 +63,9 @@ export const handler: Handlers<Data, FreshContextState> = {
formData,
isEmailVerificationEnabled,
isMultiFactorAuthEnabled,
isSingleSignOnEnabled,
helpEmail,
singleSignOnUrl,
});
},
async POST(request, context) {
@@ -64,7 +75,13 @@ export const handler: Handlers<Data, FreshContextState> = {
const isEmailVerificationEnabled = await AppConfig.isEmailVerificationEnabled();
const isMultiFactorAuthEnabled = await AppConfig.isMultiFactorAuthEnabled() && await UserModel.isThereAnAdmin();
const helpEmail = (await AppConfig.getConfig()).visuals.helpEmail;
const isSingleSignOnEnabled = await AppConfig.isSingleSignOnEnabled();
const config = await AppConfig.getConfig();
const helpEmail = config.visuals.helpEmail;
const singleSignOnUrl = isSingleSignOnEnabled
? (await OidcModel.getSignInUrl({ requestPermissions: config.auth.singleSignOnScopes }))
: undefined;
const searchParams = new URL(request.url).searchParams;
@@ -132,7 +149,9 @@ export const handler: Handlers<Data, FreshContextState> = {
formData,
isEmailVerificationEnabled,
isMultiFactorAuthEnabled,
isSingleSignOnEnabled,
helpEmail,
singleSignOnUrl,
});
}
},
@@ -215,6 +234,27 @@ export default function Login({ data }: PageProps<Data, FreshContextState>) {
</section>
)
: null}
{data?.isSingleSignOnEnabled && data?.singleSignOnUrl
? (
<section class='mb-12 max-w-sm mx-auto'>
<section class='text-center'>
<p class='text-gray-400 text-sm mb-3'>or</p>
</section>
<section class='space-y-4'>
<section class='flex justify-center mt-2 mb-4'>
<a
href={data?.singleSignOnUrl}
class='button-secondary'
>
Login with SSO
</a>
</section>
</section>
</section>
)
: null}
</form>
<h2 class='text-2xl mb-4 text-center'>Need an account?</h2>

62
routes/oidc/callback.tsx Normal file
View File

@@ -0,0 +1,62 @@
import { Handlers, PageProps } from 'fresh/server.ts';
import { FreshContextState } from '/lib/types.ts';
import { AppConfig } from '/lib/config.ts';
import { OidcModel } from '/lib/models/oidc.ts';
interface Data {
error?: string;
}
export const handler: Handlers<Data, FreshContextState> = {
async GET(request, context) {
const isSingleSignOnEnabled = await AppConfig.isSingleSignOnEnabled();
if (context.state.user || !isSingleSignOnEnabled) {
return new Response('Redirect', { status: 303, headers: { 'Location': `/` } });
}
let error = '';
try {
const { response } = await OidcModel.validateAndCreateSession(request);
return response;
} catch (validationError) {
console.error(validationError);
error = (validationError as Error).message;
}
return await context.render({
error,
});
},
};
export default function OidcCallback({ data }: PageProps<Data, FreshContextState>) {
return (
<main>
<section class='max-w-screen-md mx-auto flex flex-col items-center justify-center'>
<h1 class='text-4xl mb-6'>
Login with SSO
</h1>
{data?.error
? (
<section class='notification-error'>
<h3>Failed to login!</h3>
<p>{data?.error}</p>
</section>
)
: null}
<h2 class='text-2xl mb-4 text-center'>Go back?</h2>
<p class='text-center mt-2 mb-6'>
Go back to{' '}
<strong>
<a href='/login'>login</a>
</strong>.
</p>
</section>
</main>
);
}

View File

@@ -7,6 +7,7 @@ import { UserModel, VerificationCodeModel } from '/lib/models/user.ts';
import { sendVerifyEmailEmail } from '/lib/providers/brevo.ts';
import { AppConfig } from '/lib/config.ts';
import { FreshContextState } from '/lib/types.ts';
import { OidcModel } from '/lib/models/oidc.ts';
interface Data {
error?: string;
@@ -14,6 +15,9 @@ interface Data {
email?: string;
formData?: FormData;
helpEmail: string;
isEmailVerificationEnabled: boolean;
isSingleSignOnEnabled: boolean;
singleSignOnUrl?: string;
}
export const handler: Handlers<Data, FreshContextState> = {
@@ -22,7 +26,14 @@ export const handler: Handlers<Data, FreshContextState> = {
return new Response('Redirect', { status: 303, headers: { 'Location': `/` } });
}
const helpEmail = (await AppConfig.getConfig()).visuals.helpEmail;
const isEmailVerificationEnabled = await AppConfig.isEmailVerificationEnabled();
const isSingleSignOnEnabled = await AppConfig.isSingleSignOnEnabled();
const config = await AppConfig.getConfig();
const helpEmail = config.visuals.helpEmail;
const singleSignOnUrl = isSingleSignOnEnabled
? (await OidcModel.getSignInUrl({ requestPermissions: config.auth.singleSignOnScopes }))
: undefined;
const searchParams = new URL(request.url).searchParams;
@@ -32,14 +43,27 @@ export const handler: Handlers<Data, FreshContextState> = {
notice = `Your account and all its data has been deleted.`;
}
return await context.render({ notice, helpEmail });
return await context.render({
notice,
helpEmail,
isEmailVerificationEnabled,
isSingleSignOnEnabled,
singleSignOnUrl,
});
},
async POST(request, context) {
if (context.state.user) {
return new Response('Redirect', { status: 303, headers: { 'Location': `/` } });
}
const helpEmail = (await AppConfig.getConfig()).visuals.helpEmail;
const isEmailVerificationEnabled = await AppConfig.isEmailVerificationEnabled();
const isSingleSignOnEnabled = await AppConfig.isSingleSignOnEnabled();
const config = await AppConfig.getConfig();
const helpEmail = config.visuals.helpEmail;
const singleSignOnUrl = isSingleSignOnEnabled
? (await OidcModel.getSignInUrl({ requestPermissions: config.auth.singleSignOnScopes }))
: undefined;
const formData = await request.clone().formData();
const email = getFormDataField(formData, 'email');
@@ -69,8 +93,6 @@ export const handler: Handlers<Data, FreshContextState> = {
const user = await UserModel.create(email, hashedPassword);
const isEmailVerificationEnabled = await AppConfig.isEmailVerificationEnabled();
if (isEmailVerificationEnabled) {
const verificationCode = await VerificationCodeModel.create(user, user.email, 'email');
@@ -83,20 +105,30 @@ export const handler: Handlers<Data, FreshContextState> = {
});
} catch (error) {
console.error(error);
return await context.render({ error: (error as Error).toString(), email, formData, helpEmail });
return await context.render({
error: (error as Error).toString(),
email,
formData,
helpEmail,
isEmailVerificationEnabled,
isSingleSignOnEnabled,
singleSignOnUrl,
});
}
},
};
function formFields(email?: string) {
function formFields(data?: Data) {
const fields: FormField[] = [
{
name: 'email',
label: 'Email',
description: `The email that will be used to login. A code will be sent to it.`,
description: data?.isEmailVerificationEnabled
? `The email that will be used to login. A code will be sent to it.`
: `The email that will be used to login.`,
type: 'email',
placeholder: 'jane.doe@example.com',
value: email || '',
value: data?.email || '',
required: true,
},
{
@@ -136,13 +168,36 @@ export default function Signup({ data }: PageProps<Data, FreshContextState>) {
)
: null}
<form method='POST' class='mb-12'>
{formFields(data?.email).map((field) => generateFieldHtml(field, data?.formData || new FormData()))}
<section class='flex justify-center mt-8 mb-4'>
<form method='POST' class={data?.isSingleSignOnEnabled && data?.singleSignOnUrl ? 'mb-4 pb-0' : 'mb-12'}>
{formFields(data).map((field) => generateFieldHtml(field, data?.formData || new FormData()))}
<section
class={`flex justify-center mt-8 ${data?.isSingleSignOnEnabled && data?.singleSignOnUrl ? 'mb-0' : 'mb-4'}`}
>
<button class='button' type='submit'>Signup</button>
</section>
</form>
{data?.isSingleSignOnEnabled && data?.singleSignOnUrl
? (
<section class='mb-12 max-w-sm mx-auto'>
<section class='text-center'>
<p class='text-gray-400 text-sm mb-3'>or</p>
</section>
<section class='space-y-4'>
<section class='flex justify-center mt-2 mb-4'>
<a
href={data?.singleSignOnUrl}
class='button-secondary'
>
Signup with SSO
</a>
</section>
</section>
</section>
)
: null}
<h2 class='text-2xl mb-4 text-center'>Already have an account?</h2>
<p class='text-center mt-2 mb-6'>
If you already have an account,{' '}