MediaKit

API for the signIn function

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

idp - The identity provider to sign in with (e.g. github)
options - The options to pass to the identity provider (e.g. redirectTo: "/")

Usage

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

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

  auth.signIn() // redirect to login page
  auth.signIn('github') // login with github and redirect to the exact same page we are at right now
  auth.signIn('github', { redirectTo: '/ok' }) // login with github and redirect to /ok
  await auth.signIn('credentials', {
    redirect: false,
    email: email(),
    password: password(),
  })
  return <div>etc</div>
}

Example

<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>

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