Merge pull request #6 from rphlmr/feat/add-example

Author: mitchelvanbever

README.md

@@ -32,66 +32,65 @@ It Supports the following:
 To allow for more freedom and support some of the different authentication types the verify no longer just sends the form,
 but it now sends the entire request. See [Setup authenticator & strategy](#setup-authenticator-&-strategy)
 
-### Setup sessionStorage
+### Setup sessionStorage, strategy & authenticator
 ```js
-// app/session.server.ts
+// app/auth.server.ts
 import { createCookieSessionStorage } from 'remix'
+import { Authenticator, AuthorizationError } from 'remix-auth'
+import { SupabaseStrategy } from '@afaik/remix-auth-supabase-strategy'
+import { supabaseClient } from '~/supabase'
+import type { Session } from '~/supabase'
 
 export const sessionStorage = createCookieSessionStorage({
-  cookie: {
-    name: 'sb',
-    sameSite: 'lax',
-    path: '/',
-    httpOnly: true,
-    secrets: [SESSION_SECRET],
-    // 1 hour resembles access_token expiration
-    // set it to 1 hour if you want to user to re-log every hour
-    // 24 hours refreshes_token if the user visits every 24 hours
-    maxAge: 60 * 60 * 24,
-    secure: process.env.NODE_ENV === 'production',
-  },
+    cookie: {
+        name: 'sb',
+        httpOnly: true,
+        path: '/',
+        sameSite: 'lax',
+        secrets: ['s3cr3t'], // This should be an env variable
+        secure: process.env.NODE_ENV === 'production',
+    },
 })
-```
-
-### Setup authenticator & strategy
-```js
-// app/auth.server.ts
-import type { Session } from '@supabase/supabase-js'
-import { Authenticator } from 'remix-auth'
-import { SupabaseStrategy } from 'remix-auth-supabase'
-import { supabase } from '~/utils/supabase'
-import { sessionStorage } from '~/session.server'
 
 export const supabaseStrategy = new SupabaseStrategy(
-  {
-    supabaseClient: supabase,
-    sessionStorage,
-    sessionKey: 'sb:session', // if not set, default is sb:session
-    sessionErrorKey: 'sb:error', // if not set, default is sb:error
-  },
-  async ({ req, supabaseClient }) => {
+    {
+        supabaseClient,
+        sessionStorage,
+        sessionKey: 'sb:session', // if not set, default is sb:session
+        sessionErrorKey: 'sb:error', // if not set, default is sb:error
+    },
     // simple verify example for email/password auth
-    const form = await req.formData()
-    const email = form?.get('email')
-    const password = form?.get('password')
-    if (!email || typeof email !== 'string' || !password || typeof password !== 'string')
-      throw new Error('Need a valid email and/or password')
-
-    return supabaseClient.auth.api.signInWithEmail(email, password).then((res) => {
-      if (res?.error || !res.data)
-        throw new Error(res?.error?.message ?? 'No user found')
-
-      return res?.data
-    })
-  },
+    async({ req, supabaseClient }) => {
+        const form = await req.formData()
+        const email = form?.get('email')
+        const password = form?.get('password')
+
+        if (!email) throw new AuthorizationError('Email is required')
+        if (typeof email !== 'string')
+            throw new AuthorizationError('Email must be a string')
+
+        if (!password) throw new AuthorizationError('Password is required')
+        if (typeof password !== 'string')
+            throw new AuthorizationError('Password must be a string')
+
+        return supabaseClient.auth.api
+            .signInWithEmail(email, password)
+            .then(({ data, error }): Session => {
+            if (error || !data) {
+                throw new AuthorizationError(
+                    error?.message ?? 'No user session found',
+                )
+            }
+
+            return data
+        })
+    },
 )
 
-export const authenticator = new Authenticator<Session>(
-  sessionStorage,
-  {
+export const authenticator = new Authenticator<Session>(sessionStorage, {
     sessionKey: supabaseStrategy.sessionKey, // keep in sync
     sessionErrorKey: supabaseStrategy.sessionErrorKey, // keep in sync
-  })
+})
 
 authenticator.use(supabaseStrategy)
 ```
@@ -101,14 +100,14 @@ authenticator.use(supabaseStrategy)
 
 ```js
 // app/routes/login.ts
-export const loader: LoaderFunction = async({ request }) =>
-  supabaseStrategy.checkSession(request, {
-    successRedirect: '/profile'
-  })
+export const loader: LoaderFunction = async({ request }) => 
+    supabaseStrategy.checkSession(request, {
+        successRedirect: '/private'
+    })
 
 export const action: ActionFunction = async({ request }) =>
   authenticator.authenticate('sb', request, {
-    successRedirect: '/profile',
+    successRedirect: '/private',
     failureRedirect: '/login',
   })
 
@@ -124,7 +123,7 @@ export default function LoginPage() {
 ```
 
 ```js
-// app/routes/profile.ts
+// app/routes/private.ts
 export const loader: LoaderFunction = async({ request }) => {
   // If token refresh and successRedirect not set, reload the current route
   const session = await supabaseStrategy.checkSession(request);
@@ -151,9 +150,9 @@ await supabaseStrategy.checkSession(request, {
 
 ##### Redirect if authenticated
 ```js
-// If the user is authenticated, redirect to /profile
+// If the user is authenticated, redirect to /private
 await supabaseStrategy.checkSession(request, {
-  successRedirect: "/profile",
+    successRedirect: "/private",
 });
 ```
 
@@ -175,68 +174,80 @@ if (session) {
 ```js
 // app/routes/login.ts
 export const loader: LoaderFunction = async({ request }) => {
-  // Beware, never set failureRedirect equals to the current route
-  const session = supabaseStrategy.checkSession(request, {
-      successRedirect: '/profile',
-      failureRedirect: "/login", // ❌ DONT'T : infinite loop
-  });
-
-  // In this example, session is always null otherwise it would have been redirected
+    // Beware, never set failureRedirect equals to the current route
+    const session = supabaseStrategy.checkSession(request, {
+        successRedirect: '/private',
+        failureRedirect: "/login", // ❌ DONT'T : infinite loop
+    });
+    
+    // In this example, session is always null otherwise it would have been redirected
 }
 ```
 
 #### Redirect to
+[Example]("https://github.com/mitchelvanbever/remix-auth-supabase-strategy/tree/main/examples/with-redirect-to")
 > With Remix.run it's easy to add super UX
+
 ```js
-// app/routes/profile.ts
+// app/routes/private.profile.ts
 export const loader: LoaderFunction = async({ request }) =>
-  // If checkSession fails, redirect to login and go back here when authenticated
-  supabaseStrategy.checkSession(request, {
-      failureRedirect: `/login?redirectTo=/profile`
-  });
+// If checkSession fails, redirect to login and go back here when authenticated
+supabaseStrategy.checkSession(request, {
+failureRedirect: `/login?redirectTo=/private/profile`
+});
+```
+```js
+// app/routes/private.ts
+export const loader: LoaderFunction = async({ request }) =>
+    // If checkSession fails, redirect to login and go back here when authenticated
+    supabaseStrategy.checkSession(request, {
+        failureRedirect: `/login`
+    });
 ```
 ```js
 // app/routes/login.ts
 export const loader = async ({ request }) => {
-  const redirectTo = new URL(request.url).searchParams.get("redirectTo") ?? "/dashboard";
+    const redirectTo = new URL(request.url).searchParams.get("redirectTo") ?? "/profile";
 
   return supabaseStrategy.checkSession(request, {
     successRedirect: redirectTo,
   });
 };
 
 export const action: ActionFunction = async({ request }) =>{
-  // Always clone request when access formData() in action/loader with authenticator
-  // 💡 request.formData() can't be called twice
-  const data = await request.clone().formData();
-  // If authenticate success, redirectTo what found in searchParams
-  // Or where you want
-  const redirectTo = data.get("redirectTo") ?? "/dashboard";
-
-  return authenticator.authenticate('sb', request, {
-    successRedirect: redirectTo,
-    failureRedirect: '/login',
-  })
+    // Always clone request when access formData() in action/loader with authenticator
+    // 💡 request.formData() can't be called twice
+    const data = await request.clone().formData();
+    // If authenticate success, redirectTo what found in searchParams 
+    // Or where you want
+    const redirectTo = data.get("redirectTo") ?? "/profile";
+    
+    return authenticator.authenticate('sb', request, {
+        successRedirect: redirectTo,
+        failureRedirect: '/login',
+    })
 }
 
 export default function LoginPage() {
-  const [searchParams] = useSearchParams();
-
-  return (
-      <Form method="post">
-          <input
-            name="redirectTo"
-            value={searchParams.get("redirectTo") ?? undefined}
-            hidden
-            readOnly
-          />
-          <input type="email" name="email" required />
-          <input
-            type="password"
-            name="password"
-          />
-          <button>Sign In</button>
-      </Form>
-  );
+    const [searchParams] = useSearchParams();
+
+    return (
+        <Form method="post">
+            <input
+                name="redirectTo"
+                value={searchParams.get("redirectTo") ?? undefined}
+                hidden
+                readOnly
+            />
+            <input type="email" name="email" />
+            <input type="password" name="password" />
+            <button>Sign In</button>
+        </Form>
+    );
 }
 ```
+
+## 📖 Examples
+- [Email / password]("https://github.com/mitchelvanbever/remix-auth-supabase-strategy/tree/main/examples/email-password")
+- [With redirect to]("https://github.com/mitchelvanbever/remix-auth-supabase-strategy/tree/main/examples/with-redirect-to")
+

examples/email-password/.env.example

@@ -0,0 +1,2 @@
+SUPABASE_SERVICE_KEY="{SERVICE_KEY}"
+SUPABASE_URL="https://{YOUR_INSTANCE_NAME}.supabase.co"

examples/email-password/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env

examples/email-password/README.md

@@ -0,0 +1,55 @@
+# Remix Auth - Supabase Strategy with email and password
+
+Authentication using `signInWithEmail`.
+
+## Preview
+
+Open this example on [CodeSandbox](https://codesandbox.com):
+
+[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/mitchelvanbever/remix-auth-supabase/tree/main/examples/email-password)
+
+## Setup
+
+1. Copy `.env.example` to create a new file `.env`:
+
+```sh
+cp .env.example .env
+```
+2. Go to https://app.supabase.io/project/{PROJECT}/api?page=auth to find your secrets
+3. Add your `SUPABASE_URL` and `SUPABASE_SERVICE_ROLE` in `.env`
+```env
+SUPABASE_SERVICE_KEY="{SERVICE_KEY}"
+SUPABASE_URL="https://{YOUR_INSTANCE_NAME}.supabase.co"
+```
+
+## Using the Remix Auth & SupabaseStrategy 🚀
+
+SupabaseStrategy provides `checkSession` working like Remix Auth `isAuthenticated` but handles token refresh
+
+You must use `checkSession` instead of `isAuthenticated`
+
+
+## Example
+
+This is using Remix Auth, `remix-auth-supabase` and `supabase-js` packages.
+
+> Thanks to Remix, we can securely use server only authentication with `supabase.auth.api.signInWithEmail`
+>
+> This function should only be called on a server (`loader` or `action` functions).
+> 
+> **⚠️ Never expose your `service_role` key in the browser**
+
+
+The `/login` route renders a form with a email and password input. After a submit it runs some validations and store `user` object, `access_token` and `refresh_token` in the session.
+
+The `/private` routes redirects the user to `/login` if it's not logged-in, or shows the user email and a logout form if it's logged-in.
+
+**Handle refreshing of tokens** (if expired) or redirects to `/login` if it fails
+
+More use cases can be found on [Supabase Strategy - Use cases](https://github.com/mitchelvanbever/remix-auth-supabase#using-the-authenticator--strategy-)
+
+## Related Links
+
+- [Remix Auth](https://github.com/sergiodxa/remix-auth)
+- [Supabase Strategy](https://github.com/mitchelvanbever/remix-auth-supabase)
+- [supabase-js](https://github.com/supabase/supabase-js)