Getting Started with SSO Kit

<dependency>
    <groupId>dev.hilla</groupId>
    <artifactId>sso-kit-starter</artifactId>
    <version>2.0.0</version>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-oauth2-resource-server</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-oauth2-client</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

<plugin>
    <groupId>dev.hilla</groupId>
    <artifactId>hilla-maven-plugin</artifactId>
    <version>${hilla.version}</version>
    <!-- Add this configuration -->
    <configuration>
        <parser>
            <packages>
                <package>com.example.application</package>
                <package>dev.hilla.sso.starter</package>
            </packages>
        </parser>
    </configuration>
    <!-- ... -->
</plugin>

@SpringBootApplication(scanBasePackages = {
  "com.example.application", // Application package.
  "dev.hilla.sso.starter" // SSO Kit package.
})
public class Application // ...

import { createContext, Dispatch, SetStateAction } from "react";
import SingleSignOnData from "./generated/dev/hilla/sso/starter/SingleSignOnData";

// Used for access control
export type AccessProps = Readonly<{
    requiresLogin?: boolean;
}>;

// The context type
export type Authentication = Readonly<{
    state: SingleSignOnData;
    hasAccess: (route: AccessProps) => boolean;
    clearAuthInfo: () => void;
}>;

// All necessary data is already loaded in the Hilla global variable.
export const initialState = (window as any).Hilla.SSO as SingleSignOnData;

// The context itself.
export const AuthContext = createContext<Authentication>({
    state: initialState,
    hasAccess: () => false,
    clearAuthInfo: () => { },
});

// The hook to use the context.
export const useAuth = (
    state: SingleSignOnData,
    setState: Dispatch<SetStateAction<SingleSignOnData>>
): Authentication => {
    return {
        state,
        hasAccess: (route: AccessProps) => {
            return !route.requiresLogin || state.authenticated;
        },
        clearAuthInfo: () => {
            setState({
                ...state,
                authenticated: false,
                backChannelLogoutEnabled: false,
                logoutLink: undefined,
                roles: [],
            });
        }
    }
};

import router from 'Frontend/routes.js';
import { useState } from 'react';
import { RouterProvider } from 'react-router-dom';
import { AuthContext, initialState, useAuth } from './useAuth';

export default function App() {
  const [state, setState] = useState(initialState);

  return <AuthContext.Provider value={useAuth(state, setState)}>
    <RouterProvider router={router} />
  </AuthContext.Provider >;
}

import { logout } from '@hilla/frontend';
import { Button } from '@hilla/react-components/Button.js';
import { AuthContext } from 'Frontend/useAuth';
import { Suspense, useContext } from 'react';

// Use the AuthContext.
const { state } = useContext(AuthContext);

// Define button event handlers.
async function signOut() {
  await logout(); // Logout on the server
  location.href = state.logoutLink!;
};

function signIn() {
  location.href = state.loginLink;
};

// Add the buttons to the footer.
<footer slot="drawer">
  {state.authenticated
    ? <Button onClick={signOut}>Sign out</Button>
    : <Button onClick={signIn}>Sign in</Button>
  }
</footer>

import { AccessProps } from './useAuth';

// Enrich the ViewRouteObject type with AccessProps.
export type ViewRouteObject = (IndexViewRouteObject | NonIndexViewRouteObject) & AccessProps;

// Add requiresLogin to the About View.
{
  path: '/about',
  element: <AboutView />,
  handle: { icon: 'la la-file', title: 'About' },
  requiresLogin: true,
},

// Gather the hasAccess function.
const { state, hasAccess } = useContext(AuthContext);

// Filter the menu when rendering.
{menuRoutes.filter(hasAccess).map(({ path, handle: { icon, title } }) => (
  // ...

import User from "Frontend/generated/dev/hilla/sso/starter/endpoint/User";
import { UserEndpoint } from "Frontend/generated/endpoints";
import { useEffect, useState } from "react";

// Store the authenticated user.
const [user, setUser] = useState<User | undefined>();

// Fetch the authenticated user from the server.
useEffect(() => {
  UserEndpoint.getAuthenticatedUser().then(setUser);
}, []);

// Add some output.
<p>Username: {user?.preferredUsername}</p>
<p>Full name: {user?.fullName}</p>
<p>Email: {user?.email}</p>