createSession

API for the createSession function

createSession is a client side Solid hook that is going to fetch the current active session (logged in user), and returns it in a shape of resource, that being said you can easily trigger Suspense by reading the returned resource.

Usage

Basic

import { createSession } from '@solid-mediakit/auth/client'
const session = createSession()

const user = () => session()?.user

Actual

import { Show, type VoidComponent } from 'solid-js'
import { createSession, signIn, signOut } from '@solid-mediakit/auth/client'
import { Title } from '@solidjs/meta'

const AuthShowcase: VoidComponent = () => {
  const session = createSession()
  return (
    <div class='flex flex-col items-center justify-center gap-4'>
      <Show
        when={session()}
        fallback={
          <button
            onClick={() => signIn('discord', { redirectTo: '/' })}
            class='rounded-full bg-black/50 px-10 py-3 font-semibold text-white no-underline transition hover:bg-black/70'
          >
            Sign in
          </button>
        }
      >
        {(session) => {
          return (
            <>
              <span class='text-xl text-black'>
                Hello there {session()?.user?.name}
              </span>
              <button
                onClick={() => signOut({ redirectTo: '/' })}
                class='rounded-full bg-black/50 px-10 py-3 font-semibold text-white no-underline transition hover:bg-black/70'
              >
                Sign out
              </button>
            </>
          )
        }}
      </Show>
    </div>
  )
}

const Home: VoidComponent = () => {
  return (
    <>
      <Title>Home</Title>
      <main class='flex flex-col items-center justify-center gap-4'>
        <span class='text-xl text-black'>Welcome to Solid Auth</span>
        <AuthShowcase />
      </main>
    </>
  )
}

export default Home

This is being used to fetch the session from the client side, if you want to fetch it server-side, check out the getSession function.