Add a OIDC login

[srosset81]

OIDC login is not really useful at the moment, because we cannot do anything with tokens returned by a Keycloak provider. But once ActivityPods 2.0 will be released with a full OIDC provider, the following may be useful:

Add auth-astro integration to astro.config.mjs like this:

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import auth from "auth-astro";
import node from "@astrojs/node";

// https://astro.build/config
export default defineConfig({
  site: 'https://example.com',
  integrations: [mdx(), sitemap(), auth()],
  output: 'server',
  adapter: node({
    mode: "standalone"
  })
});

Create a auth.config.js file with this content:

import Keycloak from '@auth/core/providers/keycloak';
import { loadEnv } from 'vite';

const env = loadEnv('production', process.cwd(), '');

export default {
  providers: [
    Keycloak({
      clientId: env.OIDC_CLIENT_ID,
      clientSecret: env.OIDC_CLIENT_SECRET,
      issuer: env.OIDC_ISSUER,
      // https://github.com/nextauthjs/next-auth/blob/main/packages/core/src/providers/oauth.ts#L145-L152
      // profile(profile) {
      //   console.log('profile', profile)
      //   return {}
      // },
    })
  ],
};

The Header component can look like this:

---
import HeaderLink from './HeaderLink.astro';
import { SITE_TITLE } from '../consts';
import { SignIn, SignOut } from 'auth-astro/components'
import { getSession } from 'auth-astro/server';
const session = await getSession(Astro.request);
---

<header>
	<nav>
		<h2><a href="/">{SITE_TITLE}</a></h2>
		<div class="internal-links">
			<HeaderLink href="/">Home</HeaderLink>
			<HeaderLink href="/blog">Blog</HeaderLink>
			<HeaderLink href="/about">About</HeaderLink>
			{session ? 
				<span> {session.user?.name} <SignOut>Déconnexion</SignIn></span>
				:
				<SignIn provider="keycloak">Connexion</SignIn>
			}
			
		</div>
      </nav>
</header>