[RFC]: Thoughts on Custom Auth Setup and Ideas to Improve

[dthyresson]

Summary

I just completed an office hours example to implement a contrived custom auth example here: https://github.com/redwoodjs/redwood-office-hours/tree/main/2022-11-13-custom-md5-auth

In doing so, I have some suggestions for the custom auth setup.

Motivation

Making custom auth easier.

Detailed proposal

1. Give the custom auth setup command a name to generate named auth files rather than just "customAuth". This would be just like creating a Page or a Cell.

   Why?

   You may implement several custom auth providers. You don't want to reorganize and rename files.

   yarn rw setup auth custom Md5Auth

2. Place in a named directory so can keep types and helpers (like localStorage helpers) neat and tidy.

   / <namedAuth>
   - index.ts
   - types.ts

3. Split up types from main auth into types. Just easier to read.

4. The auth.ts file should just be:

   import { createCustomMd5Auth } from './md5Auth'
   export const { AuthProvider, useAuth } = createCustomMd5Auth()

   where you import your custom client.

5. Setup should stub out a custom authDecoder and import that in the GraphQLHandler

   It can be simply

   import { md5AuthDecoder } from './md5AuthDecoder'
   import { AUTH_PROVIDER_TYPE as MD5_AUTH_PROVIDER_TYPE } from './md5AuthDecoder'
   
   export const authDecoder = (token, type, req) => {
     switch (type) {
       case MD5_AUTH_PROVIDER_TYPE:
         return md5AuthDecoder(token, type, req)
     }
   
     throw new Error(type + ' is not a supported auth type')
   }

   And then stub out a named decoder as well

   export const md5AuthDecoder: Decoder = (token: string, type: string) => {

   This way you have a general decoder a specific decoders.

   This can make testing easier and also let you implement multiple decoders easier since it detects the type and uses the decoder it needs.

6. UI

   90% of the time to create this custom auth example was in the UI setup for login, signup and profile widgets.

   Perhaps the web setup can also copy over pre-made UI widgets?

Notes on Setup Netlify Auth

1. have to find and remove fro App.js import { AuthProvider } from '@redwoodjs/auth'

2. Have to replace all

   import { useAuth } from '@redwoodjs/auth'

with

import { useAuth } from 'src/auth'

Are you interested in working on this?

• [X] I'm interested in working on this

[Tobbe]

1. Give the custom auth setup command a name to generate named auth files

   Sounds great. Let's do this!

2. Place in a named directory

3. Split up types from main auth into types

4. The auth.ts file should just be where you import your custom client.

5. Setup should stub out a custom authDecoder

   I worry all of this (2-5) will just make it feel overwhelming and too much boilerplate with so many new files, all with just some dummy code in them. I realize what you're suggesting is probably where many implementations will end up, but it might be better to let the user figure that out on their own.

6. UI

   I mentioned reusing the dbAuth components you get by running rw g dbAuth. You said that gave you too much, so you had to remove a lot of it.

   • If you had written something production ready, would you still have had to remove as much? Or would most of it have been useful in that case?

   and/or

   • Do you think we could write something smaller/simpler that's generic enough for the dbAuth generator to also use (like the scaffold generator uses the sdl generator under the hood)