@absolid/solid-keycloak v0.1.1

solid-keycloak

Reactive Keycloak binding for SolidJS

Installation

npm install @absolid/solid-keycloak
# or
yarn add @absolid/solid-keycloak
# or
pnpm add @absolid/solid-keycloak

Usage

Modify your App.tsx as follows:

import type {
  KeycloakConfig,
  KeycloakInitOptions,
} from '@absolid/solid-keycloak'
import { KeycloakProvider } from '@absolid/solid-keycloak'

const KEYCLOAK_CONFIG: KeycloakConfig = {
  /* ... */
}
const KEYCLOAK_INIT_OPTIONS: KeycloakInitOptions = {
  /* ... */
}

export default function App() {
  return (
    <KeycloakProvider
      config={KEYCLOAK_CONFIG}
      initOptions={KEYCLOAK_INIT_OPTIONS}
    >
      {/* ... */}
    </KeycloakProvider>
  )
}

Then, you can use it:

import { useKeycloak } from '@absolid/solid-keycloak'

export default function SomePage() {
  const keycloak = useKeycloak()

  const [resource] = createResource(async () =>
    fetch('...', {
      headers: {
        Authentication: `Bearer ${keycloak?.token()}`,
      },
    }),
  )

  return (
    <>
      <h1>
        Welcome, {keycloak?.profile()?.firstName}{' '}
        {keycloak?.profile()?.lastName}
      </h1>
    </>
  )
}