diff --git a/docs/components/DemoCards/index.tsx b/docs/components/DemoCards/index.tsx deleted file mode 100644 index 33da245870..0000000000 --- a/docs/components/DemoCards/index.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { Link } from "@/components/Link" -import { Tooltip } from "@/components/Tooltip" -import { Plus } from "@phosphor-icons/react/dist/csr/Plus" -import { ArrowSquareOut } from "@phosphor-icons/react/dist/csr/ArrowSquareOut" -import { GithubLogo } from "@phosphor-icons/react/dist/csr/GithubLogo" -import { Flask } from "@phosphor-icons/react/dist/csr/Flask" - -export function DemoCards() { - return ( -
-
-
-```ts filename="./auth.ts"
-import NextAuth from "next-auth"
-import Nodemailer from "next-auth/providers/nodemailer"
-
-export const { handlers, auth, signIn, signOut } = NextAuth({
- providers: [
- Nodemailer({
- server: process.env.EMAIL_SERVER,
- from: process.env.EMAIL_FROM,
- }),
- ],
-})
-```
-
-
-
-
-```ts filename="./src/auth.ts"
-import SvelteKitAuth from "@auth/sveltekit"
-import Nodemailer from "@auth/sveltekit/providers/nodemailer"
-
-export const { handle, signIn, signOut } = SvelteKitAuth({
- providers: [
- Nodemailer({
- server: process.env.EMAIL_SERVER,
- from: process.env.EMAIL_FROM,
- }),
- ],
-})
-```
-
-```ts filename="./src/hooks.server.ts"
-export { handle } from "./auth"
-```
-
-
-
-
-
-
-
-```ts filename="./auth.ts"
-import NextAuth from "next-auth"
-import Nodemailer from "next-auth/providers/nodemailer"
-
-export const { handlers, auth, signIn, signOut } = NextAuth({
- providers: [
- Nodemailer({
- server: {
- host: process.env.EMAIL_SERVER_HOST,
- port: process.env.EMAIL_SERVER_PORT,
- auth: {
- user: process.env.EMAIL_SERVER_USER,
- pass: process.env.EMAIL_SERVER_PASSWORD,
- },
- },
- from: process.env.EMAIL_FROM,
- }),
- ],
-})
-```
-
-
-
-
-```ts filename="./src/auth.ts"
-import SvelteKitAuth from "@auth/sveltekit"
-import Nodemailer from "@auth/sveltekit/providers/nodemailer"
-
-export const { handle, signIn, signOut } = SvelteKitAuth({
- providers: [
- Nodemailer({
- server: {
- host: process.env.EMAIL_SERVER_HOST,
- port: process.env.EMAIL_SERVER_PORT,
- auth: {
- user: process.env.EMAIL_SERVER_USER,
- pass: process.env.EMAIL_SERVER_PASSWORD,
- },
- },
- from: process.env.EMAIL_FROM,
- }),
- ],
-})
-```
-
-```ts filename="src/hooks.server.ts"
-export { handle } from "./auth"
-```
-
-
-
-
-
-
-
-```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 sign in button we just added, and you should see Auth.js built-in sign in page with the option to sign in with your email:
-
-
-
-
-```ts filename="./auth.ts"
-import NextAuth from "next-auth"
-import Postmark from "next-auth/providers/postmark"
-
-export const { handlers, auth, signIn, signOut } = NextAuth({
- providers: [Postmark],
-})
-```
-
-
-
-
-```ts filename="./src/auth.ts"
-import SvelteKitAuth from "@auth/sveltekit"
-import Postmark from "@auth/sveltekit/providers/postmark"
-
-export const { handle, signIn, signOut } = SvelteKitAuth({
- providers: [Postmark],
-})
-```
-
-```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 (
-
- )
-}
-```
-
-
-
-
-```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.
-
-
-
-
-```ts filename="./auth.ts"
-import NextAuth from "next-auth"
-import Resend from "next-auth/providers/resend"
-
-export const { handlers, auth, signIn, signOut } = NextAuth({
- providers: [Resend],
-})
-```
-
-
-
-
-```ts filename="./src/auth.ts"
-import SvelteKitAuth from "@auth/sveltekit"
-import Resend from "@auth/sveltekit/providers/resend"
-
-export const { handle, signIn, signOut } = SvelteKitAuth({
- providers: [Resend],
-})
-```
-
-```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 (
-
- )
-}
-```
-
-
-
-
-```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.
-
-
-
-
-```ts filename="./auth.ts"
-import NextAuth from "next-auth"
-import Sendgrid from "next-auth/providers/sendgrid"
-
-export const { handlers, auth, signIn, signOut } = NextAuth({
- providers: [Sendgrid],
-})
-```
-
-
-
-
-```ts filename="./src/auth.ts"
-import SvelteKitAuth from "@auth/sveltekit"
-import Sendgrid from "@auth/sveltekit/providers/sendgrid"
-
-export const { handle, signIn, signOut } = SvelteKitAuth({
- providers: [Sendgrid],
-})
-```
-
-```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 (
-
- )
-}
-```
-
-
-
-
-```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.
-
-
+
+
+```ts filename="./auth.ts"
+import NextAuth from "next-auth"
+import Resend from "next-auth/providers/resend"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers: [Resend],
+})
+```
+
+
+
+
+```ts filename="./src/auth.ts"
+import SvelteKitAuth from "@auth/sveltekit"
+import Resend from "@auth/sveltekit/providers/resend"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+ providers: [Resend],
+})
+```
+
+```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 (
+
+ )
+}
+```
+
+
+
+
+```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.
+
+
+
+
+```ts filename="./auth.ts"
+import NextAuth from "next-auth"
+import Sendgrid from "next-auth/providers/sendgrid"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers: [Sendgrid],
+})
+```
+
+
+
+
+```ts filename="./src/auth.ts"
+import SvelteKitAuth from "@auth/sveltekit"
+import Sendgrid from "@auth/sveltekit/providers/sendgrid"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+ providers: [Sendgrid],
+})
+```
+
+```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 (
+
+ )
+}
+```
+
+
+
+
+```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.
+
+
+
+
+```ts filename="./auth.ts"
+import NextAuth from "next-auth"
+import Nodemailer from "next-auth/providers/nodemailer"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers: [
+ Nodemailer({
+ server: process.env.EMAIL_SERVER,
+ from: process.env.EMAIL_FROM,
+ }),
+ ],
+})
+```
+
+
+
+
+```ts filename="./src/auth.ts"
+import SvelteKitAuth from "@auth/sveltekit"
+import Nodemailer from "@auth/sveltekit/providers/nodemailer"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+ providers: [
+ Nodemailer({
+ server: process.env.EMAIL_SERVER,
+ from: process.env.EMAIL_FROM,
+ }),
+ ],
+})
+```
+
+```ts filename="./src/hooks.server.ts"
+export { handle } from "./auth"
+```
+
+
+
+
+
+
+
+```ts filename="./auth.ts"
+import NextAuth from "next-auth"
+import Nodemailer from "next-auth/providers/nodemailer"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers: [
+ Nodemailer({
+ server: {
+ host: process.env.EMAIL_SERVER_HOST,
+ port: process.env.EMAIL_SERVER_PORT,
+ auth: {
+ user: process.env.EMAIL_SERVER_USER,
+ pass: process.env.EMAIL_SERVER_PASSWORD,
+ },
+ },
+ from: process.env.EMAIL_FROM,
+ }),
+ ],
+})
+```
+
+
+
+
+```ts filename="./src/auth.ts"
+import SvelteKitAuth from "@auth/sveltekit"
+import Nodemailer from "@auth/sveltekit/providers/nodemailer"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+ providers: [
+ Nodemailer({
+ server: {
+ host: process.env.EMAIL_SERVER_HOST,
+ port: process.env.EMAIL_SERVER_PORT,
+ auth: {
+ user: process.env.EMAIL_SERVER_USER,
+ pass: process.env.EMAIL_SERVER_PASSWORD,
+ },
+ },
+ from: process.env.EMAIL_FROM,
+ }),
+ ],
+})
+```
+
+```ts filename="src/hooks.server.ts"
+export { handle } from "./auth"
+```
+
+
+
+
+
+
+
+```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 sign in button we just added, and you should see Auth.js built-in sign in page with the option to sign in with your email:
+
+
+
+
+```ts filename="./auth.ts"
+import NextAuth from "next-auth"
+import Postmark from "next-auth/providers/postmark"
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers: [Postmark],
+})
+```
+
+
+
+
+```ts filename="./src/auth.ts"
+import SvelteKitAuth from "@auth/sveltekit"
+import Postmark from "@auth/sveltekit/providers/postmark"
+
+export const { handle, signIn, signOut } = SvelteKitAuth({
+ providers: [Postmark],
+})
+```
+
+```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 (
+
+ )
+}
+```
+
+
+
+
+```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.
+
+