signOut

API for the signOut function

The signOut function is a function that will be used from the client side to sign out the user, after signing out, the session in useAuth will be refetched and updated accordingly. This function takes 1 argument:

options - An object that contains the following properties:
- redirectTo - A string that represents the path to redirect to after signing out, defaults to /

Usage

import { useAuth } from '@solid-mediakit/auth/client'

const MyComp = () => {
  const auth = useAuth()

  auth.signOut() // redirect to login page
  auth.signOut({ redirectTo: '/auth' }) // redirect to /ok

  return <div>etc</div>
}

Example

<Match when={auth.status() === 'authenticated'}>
  <button
    onClick={async () => {
      await auth.signOut({ redirect: false })
    }}
    class='font-bold text-3xl text-red-500'
  >
    Sign Out
  </button>
</Match>

Full Example

const AuthShowcase: VoidComponent = () => {
  const auth = useAuth()
  const [email, setEmail] = createSignal('')
  const [password, setPassword] = createSignal('')

  return (
    <div class='flex flex-col items-center justify-center gap-4'>
      <div>
        {JSON.stringify(
          {
            status: auth.status(),
            session: auth.session(),
          },
          null,
          2,
        )}
      </div>
      <Switch fallback={<div>Loading...</div>}>
        <Match when={auth.status() === 'authenticated'}>
          <button
            onClick={async () => {
              await auth.signOut({ redirect: false })
            }}
            class='font-bold text-3xl text-red-500'
          >
            Sign Out
          </button>
        </Match>
        <Match when={auth.status() === 'unauthenticated'}>
          <div class='flex flex-col gap-4 itesms-center'>
            <input
              type='text'
              value={email()}
              placeholder='Email'
              onInput={(e) => setEmail(e.currentTarget.value)}
              class='outline-none bg-zinc-700 rounded-lg p-3 text-white text-lg font-bold'
            />
            <input
              type='password'
              value={password()}
              placeholder='Password'
              onInput={(e) => setPassword(e.currentTarget.value)}
              class='outline-none bg-zinc-700 rounded-lg p-3 text-white text-lg font-bold'
            />
            <button
              onClick={async () => {
                const r = await auth.signIn('credentials', {
                  redirect: false,
                  email: email(),
                  password: password(),
                })
                console.log('here', r)
              }}
              class='font-bold text-3xl text-green-500'
            >
              Sign In
            </button>
          </div>
        </Match>
      </Switch>
    </div>
  )
}

Last updated: 5/30/25, 9:16 AM