diff --git a/docs/components/OAuthProviderInstructions/OAuthProviderSelect.tsx b/docs/components/OAuthProviderInstructions/OAuthProviderSelect.tsx
index c505580d85..aeff3bef6c 100644
--- a/docs/components/OAuthProviderInstructions/OAuthProviderSelect.tsx
+++ b/docs/components/OAuthProviderInstructions/OAuthProviderSelect.tsx
@@ -4,44 +4,68 @@ import {
ComboboxPopover,
ComboboxProvider,
} from "@ariakit/react"
-import { useOAuthProviderSelect } from "./useOAuthProviderSelect"
import dynamic from "next/dynamic"
-import type { ChangeEvent } from "react"
-
import { Link } from "@/components/Link"
import manifest from "@/data/manifest.json"
+import {
+ PreviewProviders,
+ type Provider,
+} from "@/components/SearchBarProviders/PreviewProviders"
+import { useSelectCombobox } from "@/hooks/use-select-combobox"
const OAuthProviderInstructions = dynamic(() =>
import("./content").then((mod) => mod.OAuthInstructions)
)
+const previewProviders: Provider[] = [
+ { id: "google", name: "Google" },
+ { id: "github", name: "GitHub" },
+ { id: "twitter", name: "Twitter" },
+ { id: "keycloak", name: "Keycloak" },
+ { id: "okta", name: "Okta" },
+]
+
+const items = Object.entries(manifest.providersOAuth).map(([id, name]) => ({
+ id,
+ name,
+}))
+
export function OAuthProviderSelect() {
- const { items, term, selected, handleSearchItem, handleSelectOption } =
- useOAuthProviderSelect()
+ const {
+ selectedItem,
+ filteredItems,
+ hasMatchItem,
+ handleChange,
+ handleSelect,
+ } = useSelectCombobox({
+ items,
+ })
return (
-
+
) =>
- handleSearchItem(e.target.value)
- }
+ value={selectedItem.name}
+ onChange={handleChange}
/>
- {items.map((item) => (
+ {filteredItems.map((item) => (
handleSelectOption(item)}
+ onClick={() => handleSelect(item)}
>
))}
- {!term ? (
+ {!selectedItem.name && (
<>
Or jump directly to one of the popular ones below.
-
-
- handleSelectOption({ id: "google", name: "Google" })
- }
- className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
- >
-
-
Google
-
-
- handleSelectOption({ id: "github", name: "GitHub" })
- }
- >
-
-
GitHub
-
-
- handleSelectOption({ id: "twitter", name: "Twitter" })
- }
- className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
- >
-
-
Twitter
-
-
- handleSelectOption({ id: "keycloak", name: "keycloak" })
- }
- className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
- >
-
-
Keycloak
-
-
handleSelectOption({ id: "okta", name: "okta" })}
- className="flex h-32 w-32 flex-col items-center justify-between rounded-lg border border-solid border-neutral-200 p-4 shadow-sm transition-colors duration-300 hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-950"
- >
-
-
Okta
-
-
Can't find the OAuth provider you're looking for? You can always{" "}
@@ -119,17 +95,11 @@ export function OAuthProviderSelect() {
.
- ) : null}
+ )}
- {selected && term && items.length !== 0 ? (
-
- ) : null}
+ {hasMatchItem && (
+
+ )}
)
}
diff --git a/docs/components/OAuthProviderInstructions/content/components/SetupCode.tsx b/docs/components/OAuthProviderInstructions/content/components/SetupCode.tsx
index a28c8bfe3d..cbbb25ed91 100644
--- a/docs/components/OAuthProviderInstructions/content/components/SetupCode.tsx
+++ b/docs/components/OAuthProviderInstructions/content/components/SetupCode.tsx
@@ -21,6 +21,7 @@ export function SetupCode({ providerId, providerName, highlight }: Props) {
data-copy=""
data-language="tsx"
icon={TSIcon}
+ className="px-4"
dangerouslySetInnerHTML={{
__html: highlight(`
import NextAuth from "next-auth"
@@ -40,6 +41,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
data-theme="default"
data-copy=""
data-language="tsx"
+ className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
@@ -57,13 +59,14 @@ export const { GET, POST } = handlers
data-theme="default"
data-copy=""
data-language="tsx"
+ className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
-import { SvelteKitAuth } from "@auth/sveltekit"
-import ${providerName} from "@auth/sveltekit/providers/${providerId}"
+import { QwikAuth$ } from "@auth/qwik"
+import ${providerName} from "@auth/qwik/providers/${providerId}"
-export const { handle, signIn, signOut } = SvelteKitAuth({
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$({
providers: [${providerName}],
}) `),
}}
@@ -78,6 +81,7 @@ export const { handle, signIn, signOut } = SvelteKitAuth({
data-theme="default"
data-copy=""
data-language="tsx"
+ className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
@@ -98,6 +102,7 @@ export const { handle, signIn } = SvelteKitAuth({
data-theme="default"
data-copy=""
data-language="tsx"
+ className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`export { handle } from "./auth"`),
@@ -113,6 +118,7 @@ export const { handle, signIn } = SvelteKitAuth({
data-theme="default"
data-copy=""
data-language="tsx"
+ className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
@@ -134,6 +140,7 @@ export const load: LayoutServerLoad = async (event) => {
data-theme="default"
data-copy=""
data-language="tsx"
+ className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
diff --git a/docs/components/OAuthProviderInstructions/content/components/SignInCode.tsx b/docs/components/OAuthProviderInstructions/content/components/SignInCode.tsx
index ee38c49767..eb0147c6f2 100644
--- a/docs/components/OAuthProviderInstructions/content/components/SignInCode.tsx
+++ b/docs/components/OAuthProviderInstructions/content/components/SignInCode.tsx
@@ -17,6 +17,7 @@ export function SignInCode({ providerId, providerName, highlight }: Props) {
data-theme="default"
data-copy=""
data-language="tsx"
+ className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
@@ -37,6 +38,27 @@ export default function SignIn() {
}}
/>
+
+ signIn("${providerId}")}>
+}
+`),
+ }}
+ />
+
With Qwik we can do a server-side login with Form action, or a more
simple client-side login via submit method.
@@ -45,6 +67,7 @@ export default function SignIn() {
data-theme="default"
data-copy=""
data-language="tsx"
+ className="px-4"
icon={TSIcon}
dangerouslySetInnerHTML={{
__html: highlight(`
@@ -88,6 +111,7 @@ export default component$(() => {
data-theme="default"
data-copy=""
data-language="tsx"
+ className="px-4"
icon={TSIcon}
data-filename="src/routes/+page.svelte"
dangerouslySetInnerHTML={{
@@ -112,6 +136,7 @@ export default component$(() => {
data-theme="default"
data-copy=""
data-language="tsx"
+ className="px-4"
icon={TSIcon}
data-filename="src/routes/signin/+page.server.ts"
dangerouslySetInnerHTML={{
@@ -129,6 +154,7 @@ export const actions: Actions = { default: signIn }
data-theme="default"
data-copy=""
data-language="tsx"
+ className="px-4"
icon={TSIcon}
data-filename="src/routes/+page.svelte"
dangerouslySetInnerHTML={{
diff --git a/docs/components/OAuthProviderInstructions/content/components/StepTitle.tsx b/docs/components/OAuthProviderInstructions/content/components/StepTitle.tsx
index 6843098d21..1c4137fb29 100644
--- a/docs/components/OAuthProviderInstructions/content/components/StepTitle.tsx
+++ b/docs/components/OAuthProviderInstructions/content/components/StepTitle.tsx
@@ -1,12 +1,29 @@
interface Props {
children: React.ReactNode
+ count: number
}
-export function StepTitle({ children }: Props) {
+export function StepTitle({ children, count }: Props) {
return (
+
+ {count}
+
{children}
)
diff --git a/docs/components/OAuthProviderInstructions/content/index.tsx b/docs/components/OAuthProviderInstructions/content/index.tsx
index 8ed2537956..3d53c6a19b 100644
--- a/docs/components/OAuthProviderInstructions/content/index.tsx
+++ b/docs/components/OAuthProviderInstructions/content/index.tsx
@@ -1,8 +1,7 @@
import { useEffect, useState } from "react"
-import { type Highlighter, getHighlighter } from "shiki"
+import { type Highlighter, createHighlighter } from "shiki"
import cx from "classnames"
import { Callout, Pre, Code as NXCode } from "nextra/components"
-
import { StepTitle } from "./components/StepTitle"
import { SetupCode } from "./components/SetupCode"
import { SignInCode } from "./components/SignInCode"
@@ -19,7 +18,7 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
const [highlighter, setHighlighter] = useState(null)
useEffect(() => {
;(async () => {
- const hl = await getHighlighter({
+ const hl = await createHighlighter({
themes: ["github-light", "github-dark"],
langs: ["ts", "tsx", "bash"],
})
@@ -39,16 +38,27 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
}
const providerName = manifest.providersOAuth[providerId]
+ const envVars = [
+ `AUTH_${providerId.toUpperCase().replace(/-/gi, "_")}_ID={CLIENT_ID}`,
+ `AUTH_${providerId.toUpperCase().replace(/-/gi, "_")}_SECRET={CLIENT_SECRET}`,
+ ]
+ if (manifest.requiresIssuer.includes(providerId)) {
+ envVars.push(
+ `AUTH_${providerId.toUpperCase().replace(/-/gi, "_")}_ISSUER={ISSUER_URL}`
+ )
+ }
+ const envString = `\n${envVars.join("\n")}\n`
return (
{/* Step 1 */}
-
Register OAuth App in {providerName}'s dashboard
+
+ Register OAuth App in {providerName}'s dashboard
+
First you have to setup an OAuth application on the {providerName}{" "}
developers dashboard.
@@ -105,68 +115,65 @@ export function OAuthInstructions({ providerId, disabled = false }: Props) {
environment(s).
{/* Step 2 */}
- Setup Environment Variables
+ Setup Environment Variables
- Once registered, you should get a Client ID and{" "}
- Client Secret. Add those in your application
- environment file:
+ Once registered, you should receive a{" "}
+ {manifest.requiresIssuer.includes(providerId) ? (
+ <>
+ Client ID, Client Secret and{" "}
+ Issuer URL
+
+ ) : (
+ <>
+ Client ID and Client Secret
+
+ )}
+ . Add those in your application environment file:
-
+
+
+
-
+
+
+
-
+
+
+
-
+
+
+
Assuming{" "}
@@ -189,7 +196,7 @@ AUTH_${providerId.toUpperCase().replace(/-/gi, "_")}_SECRET={CLIENT_SECRET}
if needed, but then you’ll need to pass them to the provider manually.
{/* Step 3 */}
- Setup Provider
+ Setup Provider
Let’s enable {providerName} as a sign in option in our Auth.js
configuration. You’ll have to import the {providerName}{" "}
@@ -202,7 +209,7 @@ AUTH_${providerId.toUpperCase().replace(/-/gi, "_")}_SECRET={CLIENT_SECRET}
highlight={highlight}
/>
{/* Step 4 */}
- Add Signin Button
+ Add Signin Button
Next, we can add a signin button somewhere in your application like the
Navbar. It will trigger Auth.js sign in when clicked.
@@ -213,7 +220,7 @@ AUTH_${providerId.toUpperCase().replace(/-/gi, "_")}_SECRET={CLIENT_SECRET}
highlight={highlight}
/>
{/* Step 5 */}
- Ship it!
+ Ship it!
Click the “Sign in with {providerName}" button and if all went well, you
should be redirected to {providerName} and once authenticated,
diff --git a/docs/components/OAuthProviderInstructions/useOAuthProviderSelect.ts b/docs/components/OAuthProviderInstructions/useOAuthProviderSelect.ts
deleted file mode 100644
index 97d5072861..0000000000
--- a/docs/components/OAuthProviderInstructions/useOAuthProviderSelect.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useState } from "react"
-import manifest from "@/data/manifest.json"
-
-const providerList = Object.entries(manifest.providersOAuth).map(
- ([id, name]) => {
- return { id, name }
- }
-)
-
-export function useOAuthProviderSelect() {
- const [term, setTerm] = useState("")
- const [selected, setSelected] = useState("")
-
- function handleSearchItem(term: string) {
- setTerm(term)
- }
-
- function handleSelectOption(item: { id: string; name: string }) {
- setTerm(item.name)
- setSelected(item.id)
- }
-
- return {
- items: providerList.filter((item) =>
- item.name.toLowerCase().includes(term?.toLowerCase())
- ),
- term,
- selected,
- handleSearchItem,
- handleSelectOption,
- }
-}
diff --git a/docs/components/SearchBarProviders/PreviewProviders.tsx b/docs/components/SearchBarProviders/PreviewProviders.tsx
new file mode 100644
index 0000000000..d1fdfdb0f2
--- /dev/null
+++ b/docs/components/SearchBarProviders/PreviewProviders.tsx
@@ -0,0 +1,35 @@
+export interface Provider {
+ id: string
+ name: string
+}
+
+export interface PreviewProvidersProps {
+ className?: string
+ providers: Provider[]
+ onSelected: (provider: Provider) => void
+}
+
+export function PreviewProviders({
+ className,
+ providers,
+ onSelected,
+}: PreviewProvidersProps) {
+ return (
+
+ {providers.map((provider) => (
+ onSelected(provider)}
+ >
+
+
{provider.name}
+
-
-
- {label}
-
-
@@ -335,7 +387,7 @@ export const { handlers, auth } = NextAuth({
user = await getUserFromDb(email, pwHash)
if (!user) {
- throw new Error("User not found.")
+ throw new Error("Invalid credentials.")
}
// return JSON object with the user data
@@ -442,7 +494,7 @@ export const { handle } = SvelteKitAuth({
user = await getUserFromDb(email, pwHash)
if (!user) {
- throw new Error("User not found.")
+ throw new Error("Invalid credentials.")
}
// return JSON object with the user data
@@ -461,24 +513,3 @@ export const { handle } = SvelteKitAuth({
-
-
- The industry has come a long way since usernames and passwords were first
- introduced as the go-to mechanism for authenticating and authorizing users to
- web applications. Therefore, if possible, we recommend a more modern and
- secure authentication mechanism such as any of the [OAuth
- providers](/getting-started/authentication/oauth), [Email Magic
- Links](/getting-started/authentication/email), or [WebAuthn
- (Passkeys)](/getting-started/authentication/webauthn) options instead of
- username / password.
-
-However, we also want to be flexible and support anything
-you deem appropriate for your application and use-case.
-
-
-
-
- The Credentials provider only supports the JWT session strategy. You can still
- create and save a database session and reference it from the JWT via an id,
- but you'll need to provide that logic yourself.
-
diff --git a/docs/pages/getting-started/authentication/email.mdx b/docs/pages/getting-started/authentication/email.mdx
index 3e514bee85..ce51246686 100644
--- a/docs/pages/getting-started/authentication/email.mdx
+++ b/docs/pages/getting-started/authentication/email.mdx
@@ -32,7 +32,15 @@ This login mechanism starts by the user providing their email address at the log
defaultValue="resend"
className="w-full flex flex-col"
>
-
+
+
+ 
+ Forward Email
+
Postmark
+
+
+ 
+ Loops
+
+
+ 
+ Mailgun
+### Forward Email Setup
+
+
+
+### Database Adapter
+
+Please make sure you've [setup a database adapter](/getting-started/database), as mentioned earlier,
+a database is required for passwordless login to work as verification tokens need to be stored.
+
+### Setup Environment Variables
+
+Auth.js will automatically pick up these if formatted like the example above.
+You can [also use a different name for the environment variables](/guides/environment-variables#oauth-variables) if needed, but then you’ll need to pass them to the provider manually.
+
+```bash filename=".env"
+AUTH_FORWARDEMAIL_KEY=abc123
+```
+
+### Setup Provider
+
+Let’s enable `ForwardEmail` as a sign in option in our Auth.js configuration. You’ll have to import the `ForwardEmail` provider from the package and pass it to the providers array we setup earlier in the Auth.js config file:
+
+
+
+
+```ts filename="./auth.ts"
+import NextAuth from "next-auth"
+import ForwardEmail from "next-auth/providers/forwardemail"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers: [ForwardEmail],
+})
+```
+
+
+
+
+```ts filename="/src/routes/plugin@auth.ts"
+import { QwikAuth$ } from "@auth/qwik"
+import ForwardEmail from "@auth/qwik/providers/forwardemail"
+
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+ () => ({
+ providers: [ForwardEmail],
+ })
+)
+```
+
+
+
+
+```ts filename="./src/auth.ts"
+import SvelteKitAuth from "@auth/sveltekit"
+import ForwardEmail from "@auth/sveltekit/providers/forwardemail"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+ providers: [ForwardEmail],
+})
+```
+
+```ts filename="./src/hooks.server.ts"
+export { handle } from "./auth"
+```
+
+
+
+
+### Add Signin Button
+
+Next, we can add a signin button somewhere in your application like the Navbar. This will send an email to the user containing the magic link to sign in.
+
+
+
+
+```tsx filename="./components/sign-in.tsx"
+import { signIn } from "../../auth.ts"
+
+export function SignIn() {
+ return (
+
+ )
+}
+```
+
+
+
+
+```ts filename="./components/sign-in.tsx"
+import { component$ } from "@builder.io/qwik"
+import { useSignIn } from "./plugin@auth"
+
+export default component$(() => {
+ const signInSig = useSignIn()
+
+ return (
+
+ )
+})
+```
+
+
+
+
+```html filename="src/routes/+page.svelte"
+
+
+
+
+
+
+### Signin
+
+Start your application, once the user enters their Email and clicks on the signin button, they'll be redirected to a page that asks them to check their email. When they click on the link in their email, they will be signed in.
+
+
+
+
+ Check our [Customising magic links
+ emails](/getting-started/providers/forwardemail#customization) to learn how to
+ change the look and feel of the emails the user receives to sign in.
+
+
+For more information on this provider go to the [Forward Email docs page](/getting-started/providers/forwardemail).
+
+
+
+
+
### Resend Setup
@@ -109,7 +287,7 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
-
+
```ts filename="/src/routes/plugin@auth.ts"
import { QwikAuth$ } from "@auth/qwik"
import Resend from "@auth/qwik/providers/resend"
@@ -166,6 +344,30 @@ export function SignIn() {
```
+
+
+```tsx filename="./components/sign-in.tsx"
+"use client"
+import { signIn } from "next-auth/react"
+
+export function SignIn() {
+ const resendAction = (formData: FormData) => {
+ signIn("resend", formData)
+ }
+
+ return (
+
+ )
+}
+```
+
+
```ts filename="./components/sign-in.tsx"
@@ -263,7 +465,7 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
-
+
```ts filename="/src/routes/plugin@auth.ts"
import { QwikAuth$ } from "@auth/qwik"
import Sendgrid from "@auth/qwik/providers/sendgrid"
@@ -320,6 +522,30 @@ export function SignIn() {
```
+
+
+```tsx filename="./components/sign-in.tsx"
+"use client"
+import { signIn } from "next-auth/react"
+
+export function SignIn() {
+ const sendgridAction = (formData: FormData) => {
+ signIn("sendgrid", formData)
+ }
+
+ return (
+
+ )
+}
+```
+
+
```ts filename="./components/sign-in.tsx"
@@ -431,7 +657,7 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
-
+
```ts filename="/src/routes/plugin@auth.ts"
import { QwikAuth$ } from "@auth/qwik"
import Nodemailer from "@auth/qwik/providers/nodemailer"
@@ -510,7 +736,7 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
-
+
```ts filename="/src/routes/plugin@auth.ts"
import { QwikAuth$ } from "@auth/qwik"
import Nodemailer from "@auth/qwik/providers/nodemailer"
@@ -688,7 +914,7 @@ export const { handlers, auth, signIn, signOut } = NextAuth({
-
+
```ts filename="/src/routes/plugin@auth.ts"
import { QwikAuth$ } from "@auth/qwik"
import Postmark from "@auth/qwik/providers/postmark"
@@ -745,6 +971,30 @@ export function SignIn() {
```
+
+
+```tsx filename="./components/sign-in.tsx"
+"use client"
+import { signIn } from "next-auth/react"
+
+export function SignIn() {
+ const postmarkAction = (formData: FormData) => {
+ signIn("postmark", formData)
+ }
+
+ return (
+
+ )
+}
+```
+
+
```ts filename="./components/sign-in.tsx"
@@ -798,6 +1048,298 @@ Start your application, once the user enters their Email and clicks on the signi
For more information on this provider go to the [Postmark docs page](/getting-started/providers/postmark).
+
+
+### Loops Setup
+
+
+
+### Database Adapter
+
+Please make sure you've [setup a database adapter](/getting-started/database), as mentioned earlier,
+a database is required for passwordless login to work as verification tokens need to be stored.
+
+### Create your Transactional Email Template on Loops
+
+Loops have provided a super handy [guide](https://loops.so/docs/transactional/guide) to help you get started with creating your transactional email template.
+This provider only passes one data varaiable into the template, `url` which is the magic link to sign in. This is case sensitive, so make sure you use `url` in your template.
+On the last page of Template creation, you'll need to copy the `TRANSACTIONAL ID`. If you skipped this step, don't worry, you can get this at any from the Template edit page.
+
+### Create an API Key on Loops
+
+You'll need to create an API key to authenticate with Loops. This key should be kept secret and not shared with anyone.
+You can Generate a key by going to the [API Settings Page](https://app.loops.so/settings?page=api) and clicking Generate.
+You should name the key something that makes sense to you, like "Auth.js".
+
+### Setup Environment Variables
+
+To implement Loops, you need to set up the following environment variables. You should have these from the previous steps.
+
+```bash filename=".env"
+AUTH_LOOPS_KEY=abc123
+AUTH_LOOPS_TRANSACTIONAL_ID=def456
+```
+
+### Setup Provider
+
+Let's enable `Loops` as a sign-in option for our Auth.js configuration. You'll have to import the `Loops` provider from the package and pass it to the providers array we set up earlier in the Auth.js config file:
+
+
+
+
+```ts filename="./auth.ts"
+import NextAuth from "next-auth"
+import Loops from "next-auth/providers/loops"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers: [
+ Loops({
+ apiKey: process.env.AUTH_LOOPS_KEY,
+ transactionalId: process.env.AUTH_LOOPS_TRANSACTIONAL_ID,
+ }),
+ ],
+})
+```
+
+
+
+
+```ts filename="./src/auth.ts"
+import SvelteKitAuth from "@auth/sveltekit"
+import Loops from "@auth/sveltekit/providers/loops"
+import {
+ AUTH_LOOPS_KEY,
+ AUTH_LOOPS_TRANSACTIONAL_ID,
+} from "$env/static/private"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+ providers: [
+ Loops({
+ apiKey: AUTH_LOOPS_KEY,
+ transactionalId: AUTH_LOOPS_TRANSACTIONAL_ID,
+ }),
+ ],
+})
+```
+
+```ts filename="./src/hooks.server.ts"
+export { handle } from "./auth"
+```
+
+
+
+
+### Add Signin Button
+
+Next, we add a signin button somewhere in your application like the Navbar. This will send an email to the user containing the magic link to sign in.
+
+
+
+
+```tsx filename="./components/sign-in.tsx"
+import { signIn } from "../../auth.ts"
+
+export function SignIn() {
+ return (
+
+ )
+}
+```
+
+
+
+
+```ts filename="src/routes/+page.svelte"
+
+
+
+
+
+
+
+### Signin
+
+Start your application, click on the signin button we just added, and you should see Auth.js built-in sign in page with the option to sign in with your email.
+A user can enter their email, click "Sign in with Loops", and receive their beautifully formatted signin email.
+Clicking on the link in the email will redirect the user to your application, landing already authenticated!
+
+
+
+
+
+### Mailgun Setup
+
+
+
+### Database Adapter
+
+Please make sure you've [setup a database adapter](/getting-started/database), as mentioned earlier,
+a database is required for passwordless login to work as verification tokens need to be stored.
+
+### Setup Environment Variables
+
+Auth.js will automatically pick up these if formatted like the example above.
+You can [also use a different name for the environment variables](/guides/environment-variables#oauth-variables) if needed, but then you’ll need to pass them to the provider manually.
+
+```bash filename=".env"
+AUTH_MAILGUN_KEY=abc123
+```
+
+### Setup Provider
+
+Let’s enable `Mailgun` as a sign in option in our Auth.js configuration.
+You’ll have to import the `Mailgun` provider from the package and pass it to the providers array we setup earlier in the Auth.js config file:
+
+
+
+
+```ts filename="./auth.ts"
+import NextAuth from "next-auth"
+import Mailgun from "next-auth/providers/mailgun"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers: [Mailgun],
+})
+```
+
+
+
+
+```ts filename="/src/routes/plugin@auth.ts"
+import { QwikAuth$ } from "@auth/qwik"
+import Mailgun from "@auth/qwik/providers/mailgun"
+
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+ () => ({
+ providers: [Mailgun],
+ })
+)
+```
+
+
+
+
+```ts filename="./src/auth.ts"
+import SvelteKitAuth from "@auth/sveltekit"
+import Mailgun from "@auth/sveltekit/providers/mailgun"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+ providers: [Mailgun],
+})
+```
-
+```ts filename="./src/hooks.server.ts"
+export { handle } from "./auth"
+```
+
+
+
+
+### Add Signin Button
+
+Next, we can add a signin button somewhere in your application like the Navbar. This will send an email to the user containing the magic link to sign in.
+
+
+
+
+```tsx filename="./components/sign-in.tsx"
+import { signIn } from "../../auth.ts"
+
+export function SignIn() {
+ return (
+
+ )
+}
+```
+
+
+
+
+```ts filename="./components/sign-in.tsx"
+import { component$ } from "@builder.io/qwik"
+import { useSignIn } from "./plugin@auth"
+
+export default component$(() => {
+ const signInSig = useSignIn()
+
+ return (
+
+ )
+})
+```
+
+
+
+
+```html filename="src/routes/+page.svelte"
+
+
+
+
+
+
+### Signin
+
+Start your application, once the user enters their Email and clicks on the signin button, they'll be redirected to a page that asks them to check their email. When they click on the link in their email, they will be signed in.
+
+
+
+
+ Check our [Customising magic links
+ emails](/getting-started/providers/mailgun#customization) to learn how to
+ change the look and feel of the emails the user receives to sign in.
+
+
+For more information on this provider go to the [Mailgun docs page](/getting-started/providers/mailgun).
+
+
+
+ 
+ 
- 
+
- 
@@ -127,8 +122,22 @@ We have an [OpenCollective](https://opencollective.com/nextauth) for companies a
+ 
@@ -157,6 +166,15 @@ We have an [OpenCollective](https://opencollective.com/nextauth) for companies a
+ 
@@ -164,6 +182,13 @@ We have an [OpenCollective](https://opencollective.com/nextauth) for companies a
+ 
@@ -171,8 +196,6 @@ We have an [OpenCollective](https://opencollective.com/nextauth) for companies a
diff --git a/apps/dev/express/package.json b/apps/dev/express/package.json
index 23f4fce1fd..817a23bb57 100644
--- a/apps/dev/express/package.json
+++ b/apps/dev/express/package.json
@@ -17,7 +17,7 @@
"license": "MIT",
"dependencies": {
"@auth/express": "workspace:*",
- "express": "^4.19.2",
+ "express": "^4.20.0",
"morgan": "^1.10.0",
"pug": "^3.0.2"
},
@@ -28,8 +28,5 @@
"@types/pug": "^2.0.10",
"tsx": "^4.7.3",
"typescript": "5.4.5"
- },
- "engines": {
- "node": ">=20.11.0"
}
}
diff --git a/apps/dev/nextjs/.env.local.example b/apps/dev/nextjs/.env.local.example
index 70e5ece6f0..cb34099406 100644
--- a/apps/dev/nextjs/.env.local.example
+++ b/apps/dev/nextjs/.env.local.example
@@ -26,6 +26,7 @@ AUTH_BEYOND_IDENTITY_ISSUER=
AUTH_DESCOPE_ID=
AUTH_DESCOPE_SECRET=
+AUTH_DESCOPE_ISSUER=
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=
diff --git a/apps/dev/nextjs/app/client.tsx b/apps/dev/nextjs/app/client.tsx
index 70708cfe65..f60777109c 100644
--- a/apps/dev/nextjs/app/client.tsx
+++ b/apps/dev/nextjs/app/client.tsx
@@ -34,7 +34,11 @@ export default function Client() {
) : (
<>
-
)
}
diff --git a/docs/pages/guides/pages/signin.mdx b/docs/pages/guides/pages/signin.mdx
index d6a8499cca..c379b7c0a3 100644
--- a/docs/pages/guides/pages/signin.mdx
+++ b/docs/pages/guides/pages/signin.mdx
@@ -133,7 +133,9 @@ import { redirect } from "next/navigation"
import { signIn, auth, providerMap } from "@/auth.ts"
import { AuthError } from "next-auth"
-export default async function SignInPage() {
+export default async function SignInPage(props: {
+ searchParams: { callbackUrl: string | undefined }
+}) {
return (