Handling Signin and Signout

To signin your users, make sure you have at least one authentication method setup. You then need to build a button which will call the sign in function from your Auth.js framework package.

./components/auth/signin-button.tsx

import { signIn } from "@/auth"
 
export function SignIn() {
  return (
    <form
      action={async () => {
        "use server"
        await signIn()
      }}
    >
      <button type="submit">Sign in</button>
    </form>
  )
}

./components/auth/signin-button.tsx

"use client"
import { signIn } from "next-auth/react"
 
export function SignIn() {
  return <button onClick={() => signIn()}>Sign In</button>
}

With Qwik we can do a server-side sign in with Form action, or a more simple client-side login via submit method.

./components/sign-in.tsx

import { component$ } from "@builder.io/qwik"
import { Form } from "@builder.io/qwik-city"
import { useSignIn } from "./plugin@auth"
 
export default component$(() => {
  const signInSig = useSignIn()
 
  return (
    <>
      {/* server-side login with Form action */}
      <Form action={signInSig}>
        <input type="hidden" name="providerId" value="${providerId}" />
        <input
          type="hidden"
          name="options.redirectTo"
          value="/"
        />
        <button>Sign In</button>
      </Form>
 
      {/* submit method */}
      <Link
        onClick$={() => signInSig.submit({ redirectTo: "/" })}
      >
        SignIn
      </Link>
    </>
  )
})

The SvelteKit client supports two signin and signout methods, one server-side using Form Actions, and one client-side using requests and redirects.

Form Action (Server-Side)

To signin your users using a SvelteKit form action, we can use the SignIn component exported from @auth/sveltekit/components.

src/routes/+page.svelte

<script lang="ts">
  import { SignIn } from "@auth/sveltekit/components"
</script>
 
<header>
  <nav>
    <SignIn>
      <span slot="submitButton">Sign In with GitHub</span>
    </SignIn>
  </nav>
</header>

This requires a server action at /signin, this path can be customized with the signInPage prop on the SignIn component.

src/routes/signin/+page.server.ts

import { signIn } from "../../auth"
import type { Actions } from "./$types"
 
export const actions: Actions = { default: signIn }

Client Side

Client-side is a bit simpler as we just need to import a button on:click handler from @auth/sveltekit/client.

src/routes/+page.svelte

<script lang="ts">
  import { signIn } from "@auth/sveltekit/client"
</script>
 
<div>
  <nav>
    <img src="/img/logo.svg" alt="Company Logo" />
    <button on:click={signIn}>Signin</button>
  </nav>
</div>

Just like in other frameworks, you can also pass a provider to the signIn function which will attempt to login directly with that provider.

The Express package runs server-side and therefore it doesn’t make sense to create a “SignIn button component”. However, to signin or signout with Express, send a request to the appropriate REST API Endpoints from your client (i.e. /auth/signin, /auth/signout, etc.).

To sign in users with Express, you can create a route that handles the sign-in logic. Here is an example:

src/routes/auth.ts

import express, { Request, Response } from "express"
import { signIn } from "../auth"
const router = express.Router()
 
router.post("/auth/signin", async (req: Request, res: Response) => {
  try {
    await signIn(req, res)
    res.redirect("/dashboard")
  } catch (error) {
    res.status(500).send("Sign in failed")
  }
})
 
export { router }

To sign out users with Express, you can create a route that handles the sign-out logic. Here is an example:

src/routes/auth.ts

import express, { Request, Response } from "express"
import { signOut } from "../auth"
const router = express.Router()
 
router.post("/auth/signout", async (req: Request, res: Response) => {
  try {
    await signOut(req, res)
    res.redirect("/")
  } catch (error) {
    res.status(500).send("Sign out failed")
  }
})
 
export { router }

You can also pass a provider to the signIn function which will attempt to login directly with that provider. Otherwise, when clicking this button in your application, the user will be redirected to the configured sign in page. If you did not setup a custom sign in page, the user will be redirected to the default signin page at /[basePath]/signin.