# remix-auth-strapi

> Strapi Strategy for Remix Auth

Latest version **1.0.1** (published 2022-07-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install remix-auth-strapi
pnpm add remix-auth-strapi
yarn add remix-auth-strapi
bun add remix-auth-strapi
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-07-13 |
| First published | 2022-04-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 15.5 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Karthikeyan Mariappan |
| Maintainers | karthikeyanmariappan |
| Keywords | remix, remix-auth, remix-auth-strapi, auth, authentication, strategy, strapi |

## Links

- npm: https://www.npmjs.com/package/remix-auth-strapi
- Repository: https://github.com/kmariappan/remix-auth-strapi
- Homepage: https://github.com/kmariappan/remix-auth-strapi#readme
- Issues: https://github.com/kmariappan/remix-auth-strapi/issues
- npm.io page: https://npm.io/package/remix-auth-strapi

## Dependencies (3)

- [qs](https://npm.io/package/qs.md) ^6.11.0
- [axios](https://npm.io/package/axios.md) ^0.27.2
- [@kmariappan/strapi-client-js](https://npm.io/package/@kmariappan/strapi-client-js.md) ^1.3.0

## Alternatives

- [@clerk/clerk-expo](https://npm.io/package/@clerk/clerk-expo.md) — 133.6K weekly downloads
- [@pothos/plugin-authz](https://npm.io/package/@pothos/plugin-authz.md) — 12.4K weekly downloads
- [@bounded-sh/client](https://npm.io/package/@bounded-sh/client.md) — 3.2K weekly downloads
- [@luigi-project/plugin-auth-oauth2](https://npm.io/package/@luigi-project/plugin-auth-oauth2.md) — 2.3K weekly downloads
- [@nocobase/plugin-verification](https://npm.io/package/@nocobase/plugin-verification.md) — 2.0K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-07-13
- 0.0.1 (alpha) — 2022-04-29
- 1.0.0 — 2022-07-13
- 0.1.0 — 2022-05-02

## README

# Remix Auth Strapi

<!-- Description -->

The Strapi strategy is used to authenticate users against a Strapi CMS account.

## Supported runtimes

| Runtime    | Has Support |
| ---------- | ----------- |
| Node.js    | ✅          |
| Cloudflare | ✅          |

## Documentations

### Install the package

```js
   yarn add remix-auth-strapi

   or

   npm install remix-auth-strapi
```

## How to use

#### Create the StrapiClient Instance

```ts
// app/strapi.ts

import { createClient } from '@kmariappan/strapi-client-js'

declare global {
    namespace NodeJS {
        interface ProcessEnv {
            STRAPI_URL: string
            SECRET_KEY: string
        }
    }
}

if (!process.env.STRAPI_URL) throw new Error('STRAPI_URL is required')

export const getStrapiClient = (apiToken?: string) =>
    createClient({
        url: process.env.STRAPI_URL,
        apiToken,
    })
```

#### Create the StrapiStrategy Instance by using the `createStrapiStrategy` helper function.

```ts
// app/auth.server.ts

import { createCookieSessionStorage } from '@remix-run/node'
import { createStrapiStrategy } from 'remix-auth-strapi'
import { getStrapiClient } from './strapi'

const strapiClient = getStrapiClient()

const sessionStorage = createCookieSessionStorage({
    cookie: {
        name: 'strapi',
        httpOnly: true,
        path: '/',
        sameSite: 'lax',
        secrets: [process.env.SECRET_KEY],
        secure: process.env.NODE_ENV === 'production',
    },
})

const { authenticator, strapiStrategy } = createStrapiStrategy({
    sessionStorage,
    strapiClient,
    sessionKey: 'session-key', // Defualt value  strapi:session
    sessionErrorKey: 'session-error-key', // Defualt value  'strapi:error',
})

export { authenticator, strapiStrategy, sessionStorage }
```

#### Example Login Page

```tsx
// app/routes/login
import type { ActionFunction, LoaderFunction } from '@remix-run/node'
import { json } from '@remix-run/node'
import { Form, useLoaderData } from '@remix-run/react'
import { authenticator, strapiStrategy, sessionStorage } from '~/auth.server'

interface LoaderData {
    error: { message: string } | null
}

export const action: ActionFunction = async ({ request }) => {
    await authenticator.authenticate('strapi', request, {
        successRedirect: '/private',
        failureRedirect: '/login',
    })
}

export const loader: LoaderFunction = async ({ request }) => {
    await strapiStrategy.checkSession(request, {
        successRedirect: '/private',
    })

    const session = await sessionStorage.getSession(
        request.headers.get('Cookie')
    )

    const error = session.get(
        strapiStrategy.sessionErrorKey
    ) as LoaderData['error']

    return json<LoaderData>({ error })
}

export default function Screen() {
    const { error } = useLoaderData<LoaderData>()

    return (
        <Form method="post">
            {error && <div>{error.message}</div>}
            <div>
                <label htmlFor="email">Email</label>
                <input type="email" name="email" id="email" />
            </div>

            <div>
                <label htmlFor="password">Password</label>
                <input type="password" name="password" id="password" />
            </div>

            <button>Log In</button>
        </Form>
    )
}
```

#### Example Private Page

```tsx
import type { User } from '@kmariappan/strapi-client-js/src/lib/types/auth'
import type { ActionFunction, LoaderFunction } from '@remix-run/node'
import { json } from '@remix-run/node'
import { Form, useLoaderData } from '@remix-run/react'
import { authenticator, strapiStrategy } from '~/auth.server'
import { getStrapiClient } from '~/strapi'

interface LoaderData {
    user?: User | null
}

export const action: ActionFunction = async ({ request }) => {
    await authenticator.logout(request, {
        redirectTo: '/login',
    })
}

export const loader: LoaderFunction = async ({ request }) => {
    const session = await strapiStrategy.checkSession(request, {
        failureRedirect: '/login',
    })

    const strapiClient = getStrapiClient(session.data?.jwt)

    const { data } = await strapiClient.auth.getMe()

    return json<LoaderData>({ user: data ?? null })
}

export default function Screen() {
    const { user } = useLoaderData<LoaderData>()
    return (
        <>
            {user && <h1> {user.email}</h1>}

            <Form method="post">
                <button>Log Out</button>
            </Form>
        </>
    )
}
```

---
_Source: https://npm.io/package/remix-auth-strapi · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._