Decouple auth (#5985)

* AuthProvider: Don't type cast createAuthClient args

* AuthProvider: Get rid of unused AuthContext init params

* Provide types for web auth methods

* Minor updates after writing PR description

* AuthProvider: 'type' from authImpl

* Auth: Custom getCurrentUser

* Update more auth providers implementations

* Export auth fatory methods

* Create wrapper methods to help TS with types

* SuperTokens authImplementation

* Okta authImplementation

* GoTrue authImplementation

* MagicLink authImplementation

* Firebase authImplementation

* Auth0 authImplementation

* Ethereum and AzureActiveDirectory authImplementation

* Get rid of authClients

* Export auth factories

* useAuth all over the place

* Update yarn.lock

* useNoAuth

* Relative imports

* update test-project fixture

* Make all Auth tests pass

* Fix router tests

* Better solution for tests

* No global useAuth

* Simplify types

* setup types for netlify-identity

* useListenForUpdates and clerk updates

* Update clerk integration

* auth setup: print correct ts/js file ext

* Pass through client to useAuth. Enable WebAuthn for dbAuth

* Fix ethereum authImplementation

* web side auth.ts templates

* auth setup

* More auth setup tests

* Code review fixes

* Update useNoAuth so router unit tests pass

* auth setup: Warn if we can't find RedwoodApolloProvider

* Auth handler tests

* Update README.md

* lib templates: Use currentUserRoles everywhere for better TS experience

* Clean up provider specific config that has moved to separate files

* Custom auth setup command

* Fix import order in auth templates

* netlify auth: fix package lis

* auth-providers and mocked useAuth

* auth setup: Update RedwoodApolloProvider warning message

* auth setup: Use @redwoodjs/auth-providers

* dbAuth test login

* dbAuth test logout

* Test customProviderHooks in AuthProvider

* Update test snapshots

* Updated test-project fixture

* Fix bad merge

* Update dbAuth page templates

* Update test-project codemods

* internal fixture: Update useAuth import

* Clean up MockProviders

* update test-project fixture

* Use path.sep cuz Windows

* Handle windows paths

* One more test to fix

* Mock useAuth for StoryBook

* Tweak SB config

* Smarter hasRole mock

* rbacChecks: Make it less flakey

* auth0 tests

* AzureActiveDirectory tests

* Clerk tests

* Updated yarn.lock

* Test GoTrue and Netlify

* yarn constraints fix

* Move auth api templates into api folder

* authFiles: More accurate comment

* Auth setup: Group tempalates by provider

* Support arbritary files/templates

* Supertokens auth setup

* setup auth: fix api output path

* Handle existing files + ts and js projects

* fix yarn constraints

* Better support for multiple auth providers on the api side

* Start moving setup commands into provider specific folders

* Update supertokens templates

* Auth specific setup scripts

* authFiles, authTasks: Switch to TS

* Start moving setup scripts to the auth-providers package

* Tighten up Telemetry types

* rw/cli tsconfig

* @redwoodjs/cli-helpers

* Keep moving setup scripts to the auth-provider package

* Moved all auth provider setup scripts to the auth-provider package

* Update auth-helper exports. Move helper function to cli-helpers

* Re-add setup auth command

* Use cli-helpers methods in the cli package

* Setup commands happy-path working

* Use unique filenames to avoid overwriting existing files

* Restructure netlify auth

* Restructure auth-provider package

* Revert "Use cli-helpers methods in the cli package"

This reverts commit 8704d6b.

* CLI keeps its methods

* cli: clean up package config

* graphql-server: fix tests and improve typing

* authFiles: Rename files -> apiSideFiles

* cli-helpers: Add test for auth setup helpers

* Start adding authDecoder to some auth setup commands

* cli project.js: Add back missing method

* Fix broken merge in cli scripts

* Make it build

* Update test project fixture

* auth-providers-setup package

* auth-providers-setup: Remove web and api folders

* auth-providers-setup: restructure package

* Try adding types to telemetry

* auth-providers-web

* auth-providers-web: Remove non-web files

* auth-providers-web: restructure

* auth setup: Fix template imports

* auth-providers: Only export api stuff

* auth-providers-web: correct package name

* auth-providers -> auth-providers-api

* Update yarn.lock

* Update auth-providers import

* Make all tests pass

* Update test project fixture

* Fix package imports

* Fix imports and update test-project fixture

* Pass auth-provider type to auth decoders

* auth decoders: Use Decoder type

* Netlify setup: Temporarily disable rw auth package installation

* strict mode

* Fix broken merge

* Fix package deps

* Tweak regexps to fix code scanning issues

* Atomic group regex

* One more atomic group regex

* yarn constraints fix

* Revert "yarn constraints fix"

This reverts commit 7d463a2.

* manual yarn constraints fix

* More manual version updates

* Don't use carret versions

* update lockfile

* Fix lint warnings

* Remove DMMF import

* Update snapshots

* Use node14 compatible syntax

* Fix api side auth imports

* Fix yarn.lock

* Update regex

* Tweak regex

* Avoid red squiggles in generated code

* Updated test fixture

* Export Decoded

* dbAuth template types

* Update test-project fixture

* Add jsonwebtoken to auth-providers-api deps

* auth-providers-api: Update jest config

* auth-providers-api: Add azureAD tests

* Update azureAD test and decoder

* auth-providers-api: test clerk

* auth-providers-api ethereum tests

* auth-providers-api: firebase tests

* use default req in tests

* auth-providers-api: goTrue tests

* auth-providers-api: netlify tests

* Test magicLink

* Test nhost decoder

* test okta decoder

* okta tests: Better types

* test supabase decode

* supertokens decoder tests

* Duplicate mock req to make tests standalone

* auth-providers-web: ethereum and firebase tests

* fix: resolve firebase/auth and deps to commonjs

* Fix firebase tests

* Type-tweak to firebase test

* test magicLink

* auth-providers-web: test nhost

* okta tests

* Test supabase and supertokens

* Add usage warning and prompt to auth setup

* Fix merge resolutions

* Fix package versions

* Allow bypassing auth setup prompt (for CI)

* auth docs: custom auth

* Temporary fix for dbauth webauthn

* Update packages/cli/src/commands/__tests__/test.test.js

Co-authored-by: Dominic Saadi <[email protected]>

* Review comment fixes. Biggest one is switching to listr2 in cli-helpers

* Revert unneeded change

* Add changes from #6372

* Fix clerk auth build error

* Fix #6372 implementation

* Add missign auth decoder exports

* Update auth imports

* Add firebase anon auth

* cli-helpers: listr2 dep, and test fixes

* auth2

* dbAuth passwordValidation

* Minimize changes to packages/api

* Minimize changes to packages/auth

* Fix bad merge

* Move to @rwjs/auth instead of auth2

* Fix cli-helpers test

* auth2 -> auth fixes

Co-authored-by: Dominic Saadi <[email protected]>

__fixtures__/test-project/.yarnrc.yml

@@ -14,4 +14,4 @@ nmMode: hardlinks-local
 # Heads up: right now, Redwood expects this to be `node-modules`.
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.2.4.cjs
+yarnPath: .yarn/releases/yarn-3.2.3.cjs

__fixtures__/test-project/api/src/functions/auth.ts

@@ -1,7 +1,9 @@
 import type { APIGatewayProxyEvent, Context } from 'aws-lambda'
 
-import { DbAuthHandler } from '@redwoodjs/api'
-import type { DbAuthHandlerOptions } from '@redwoodjs/api'
+import {
+  DbAuthHandler,
+  DbAuthHandlerOptions,
+} from '@redwoodjs/auth-providers-api'
 
 import { db } from 'src/lib/db'
 

__fixtures__/test-project/api/src/functions/graphql.ts

@@ -1,3 +1,4 @@
+import { dbAuthAuthDecoder as authDecoder } from '@redwoodjs/auth-providers-api'
 import { createGraphQLHandler } from '@redwoodjs/graphql-server'
 
 import directives from 'src/directives/**/*.{js,ts}'
@@ -9,6 +10,7 @@ import { db } from 'src/lib/db'
 import { logger } from 'src/lib/logger'
 
 export const handler = createGraphQLHandler({
+  authDecoder,
   getCurrentUser,
   loggerConfig: { logger, options: {} },
   directives,

__fixtures__/test-project/api/src/services/posts/posts.scenarios.ts

@@ -10,7 +10,7 @@ export const standard = defineScenario<Prisma.PostCreateArgs>({
         body: 'String',
         author: {
           create: {
-            email: 'String9043010',
+            email: 'String5142071',
             hashedPassword: 'String',
             fullName: 'String',
             salt: 'String',
@@ -24,7 +24,7 @@ export const standard = defineScenario<Prisma.PostCreateArgs>({
         body: 'String',
         author: {
           create: {
-            email: 'String3280784',
+            email: 'String2527444',
             hashedPassword: 'String',
             fullName: 'String',
             salt: 'String',

__fixtures__/test-project/api/src/services/users/users.scenarios.ts

@@ -6,15 +6,15 @@ export const standard = defineScenario<Prisma.UserCreateArgs>({
   user: {
     one: {
       data: {
-        email: 'String4277909',
+        email: 'String1171894',
         hashedPassword: 'String',
         fullName: 'String',
         salt: 'String',
       },
     },
     two: {
       data: {
-        email: 'String493680',
+        email: 'String1703130',
         hashedPassword: 'String',
         fullName: 'String',
         salt: 'String',

__fixtures__/test-project/scripts/seed.ts

@@ -95,7 +95,7 @@ export default async () => {
     // and associated `salt` to their record. Here's how to create them using
     // the same algorithm that dbAuth uses internally:
     //
-    //   import { hashPassword } from '@redwoodjs/api'
+    //   import { hashPassword } from '@redwoodjs/auth-providers-api'
     //
     //   const users = [
     //     { name: 'john', email: '[email protected]', password: 'secret1' },

__fixtures__/test-project/web/package.json

@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.12",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.18",
     "postcss-loader": "^7.0.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.1.8"

__fixtures__/test-project/web/src/App.tsx

@@ -1,18 +1,19 @@
-import { AuthProvider } from '@redwoodjs/auth'
 import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
 import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
+import { AuthProvider, useAuth } from './auth'
+
 import './scaffold.css'
 import './index.css'
 
 const App = () => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
-      <AuthProvider type="dbAuth">
-        <RedwoodApolloProvider>
+      <AuthProvider>
+        <RedwoodApolloProvider useAuth={useAuth}>
           <Routes />
         </RedwoodApolloProvider>
       </AuthProvider>

__fixtures__/test-project/web/src/Routes.tsx

@@ -13,9 +13,11 @@ import BlogLayout from 'src/layouts/BlogLayout'
 import ScaffoldLayout from 'src/layouts/ScaffoldLayout'
 import HomePage from 'src/pages/HomePage'
 
+import { useAuth } from './auth'
+
 const Routes = () => {
   return (
-    <Router>
+    <Router useAuth={useAuth}>
       <Route path="/login" page={LoginPage} name="login" />
       <Route path="/signup" page={SignupPage} name="signup" />
       <Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />

__fixtures__/test-project/web/src/auth.ts

@@ -0,0 +1,3 @@
+import { createDbAuth } from '@redwoodjs/auth-providers-web'
+
+export const { AuthProvider, useAuth } = createDbAuth()

__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.tsx

@@ -2,9 +2,10 @@ type BlogLayoutProps = {
   children?: React.ReactNode
 }
 
-import { useAuth } from '@redwoodjs/auth'
 import { Link, routes } from '@redwoodjs/router'
 
+import { useAuth } from 'src/auth'
+
 const BlogLayout = ({ children }: BlogLayoutProps) => {
   const { logOut, isAuthenticated } = useAuth()
 

__fixtures__/test-project/web/src/pages/ForgotPasswordPage/ForgotPasswordPage.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useRef } from 'react'
 
-import { useAuth } from '@redwoodjs/auth'
 import { Form, Label, TextField, Submit, FieldError } from '@redwoodjs/forms'
 import { navigate, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
+import { useAuth } from 'src/auth'
+
 const ForgotPasswordPage = () => {
   const { isAuthenticated, forgotPassword } = useAuth()
 

__fixtures__/test-project/web/src/pages/LoginPage/LoginPage.tsx

@@ -1,7 +1,6 @@
 import { useRef } from 'react'
 import { useEffect } from 'react'
 
-import { useAuth } from '@redwoodjs/auth'
 import {
   Form,
   Label,
@@ -14,6 +13,8 @@ import { Link, navigate, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
+import { useAuth } from 'src/auth'
+
 const LoginPage = () => {
   const { isAuthenticated, logIn } = useAuth()
 

__fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.tsx

@@ -1,7 +1,8 @@
-import { useAuth } from '@redwoodjs/auth'
 import { Link, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 
+import { useAuth } from 'src/auth'
+
 const ProfilePage = () => {
   const { currentUser, isAuthenticated, hasRole, loading } = useAuth()
 

__fixtures__/test-project/web/src/pages/ResetPasswordPage/ResetPasswordPage.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
 
-import { useAuth } from '@redwoodjs/auth'
 import {
   Form,
   Label,
@@ -12,6 +11,8 @@ import { navigate, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
+import { useAuth } from 'src/auth'
+
 const ResetPasswordPage = ({ resetToken }: { resetToken: string }) => {
   const { isAuthenticated, reauthenticate, validateResetToken, resetPassword } =
     useAuth()

__fixtures__/test-project/web/src/pages/SignupPage/SignupPage.tsx

@@ -1,7 +1,6 @@
 import { useRef } from 'react'
 import { useEffect } from 'react'
 
-import { useAuth } from '@redwoodjs/auth'
 import {
   Form,
   Label,
@@ -14,6 +13,8 @@ import { Link, navigate, routes } from '@redwoodjs/router'
 import { MetaTags } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
+import { useAuth } from 'src/auth'
+
 const SignupPage = () => {
   const { isAuthenticated, signUp } = useAuth()
 

docs/docs/auth/custom.md

@@ -6,18 +6,30 @@ sidebar_label: Custom
 
 ## Installation
 
-The following CLI command (not implemented, see https://github.com/redwoodjs/redwood/issues/1585) will install required packages and generate boilerplate code and files for Redwood Projects:
+The following CLI command will install required packages and generate
+boilerplate code and files for Redwood Projects:
 
 ```bash
 yarn rw setup auth custom
 ```
 
 ## Setup
 
-It is possible to implement a custom provider for Redwood Auth. In which case you might also consider adding the provider to Redwood itself.
+It is possible to implement a custom provider for Redwood Auth. If you end up
+building something you're proud of, please consider sharing with the community!
 
-If you are trying to implement your own auth, support is very early and limited at this time. Additionally, there are many considerations and responsibilities when it comes to managing custom auth. For most cases we recommend using an existing provider.
+There are many considerations and responsibilities when it comes to managing
+custom auth. For most cases we recommend using an existing provider. However,
+there are examples contributed by developers in the Redwood forums and Discord
+server.
 
-However, there are examples contributed by developers in the Redwood forums and Discord server.
+The most complete example (although now a bit outdated) is found in [this forum
+thread](https://community.redwoodjs.com/t/custom-github-jwt-auth-with-redwood-auth/610).
+Here's another [helpful message in the
+thread](https://community.redwoodjs.com/t/custom-github-jwt-auth-with-redwood-auth/610/25).
+Both were built with a previous version of the Redwood auth subsystem.
 
-The most complete example (although now a bit outdated) is found in [this forum thread](https://community.redwoodjs.com/t/custom-github-jwt-auth-with-redwood-auth/610). Here's another [helpful message in the thread](https://community.redwoodjs.com/t/custom-github-jwt-auth-with-redwood-auth/610/25).
+The easiest way to get started writing your own custom auth provider is
+probably to look at one of the existing implementations. The simplest might
+be GoTrue or Netlify (they're basically the same). The most advanced example
+is by far dbAuth.