import { Callout } from "nextra/components"
import { Code } from "@/components/Code"

<img
  align="right"
  src="/img/providers/simplelogin.svg"
  height="64"
  width="64"
/>

# SimpleLogin Provider

## Resources

- [Sign in with SimpleLogin](https://simplelogin.io/developer/)
- [SimpleLogin OAuth documentation](https://simplelogin.io/docs/siwsl/intro/)
- [SimpleLogin OAuth Configuration](https://app.simplelogin.io/developer)

## Setup

### Callback URL

<Code>
  <Code.Next>

```bash
https://example.com/api/auth/callback/simplelogin
```

  </Code.Next>
  <Code.Qwik>

```bash
https://example.com/auth/callback/simplelogin
```

  </Code.Qwik>
  <Code.Svelte>

```bash
https://example.com/auth/callback/simplelogin
```

  </Code.Svelte>
</Code>

### Environment Variables

```
AUTH_SIMPLELOGIN_ID
AUTH_SIMPLELOGIN_SECRET
```

### Configuration

<Code>
  <Code.Next>

```ts filename="@/auth.ts"
import NextAuth from "next-auth"
import SimpleLogin from "next-auth/providers/simplelogin"

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [SimpleLogin],
})
```

  </Code.Next>
  <Code.Qwik>
  
```ts filename="/src/routes/plugin@auth.ts"
import { QwikAuth$ } from "@auth/qwik"
import SimpleLogin from "@auth/qwik/providers/simplelogin"

export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [SimpleLogin],
  })
)
```

  </Code.Qwik>
  <Code.Svelte>

```ts filename="/src/auth.ts"
import { SvelteKitAuth } from "@auth/sveltekit"
import SimpleLogin from "@auth/sveltekit/providers/simplelogin"

export const { handle, signIn, signOut } = SvelteKitAuth({
  providers: [SimpleLogin],
})
```

  </Code.Svelte>
  <Code.Express>

```ts filename="/src/app.ts"
import { ExpressAuth } from "@auth/express"
import SimpleLogin from "@auth/express/providers/simplelogin"

app.use("/auth/*", ExpressAuth({ providers: [SimpleLogin] }))
```

  </Code.Express>
</Code>

## Notes

### Authorized Redirect URIs

The "Authorized redirect URIs" used must include your full domain and end in the callback path. By default, SimpleLogin whitelists all `http[s]://localhost:*` address to facilitate local development. For example;

- For production: `https://{YOUR_DOMAIN}/api/auth/callback/simplelogin`
- For development: By default **localhost** is whitelisted.

**Authorized Redirect URIs** must be **HTTPS** for security reason (except for `localhost`).
