Auth Hooks #1993

infomiho · 2024-04-24T16:47:01Z

Adding hooks:

onBeforeSignup
onAfterSignup
onBeforeOAuthRedirect
~~onAfterOAuthTokenReceived~~

Left to do:

Changelog
Docs
Headless tests Adds auth hook headless tests #2022

infomiho · 2024-04-24T16:47:47Z

waspc/examples/todoApp/src/auth/hooks.ts

@@ -0,0 +1,30 @@
+import type {


Example usage of the hooks

infomiho · 2024-04-24T16:48:06Z

waspc/examples/todoApp/main.wasp

@@ -40,7 +40,11 @@ app todoApp {
      },
    },
    onAuthFailedRedirectTo: "/login",
-    onAuthSucceededRedirectTo: "/profile"
+    onAuthSucceededRedirectTo: "/profile",
+    onBeforeSignup: import { onBeforeSignup } from "@src/auth/hooks.js",


Declare the hooks in the auth dict

infomiho · 2024-04-24T16:48:56Z

waspc/data/Generator/templates/server/src/auth/providers/config/github.ts

-                const { accessToken } = await github.validateAuthorizationCode(code);
-                return getGithubProfile(accessToken);
-            },
+            getProviderTokens: ({ code }) => github.validateAuthorizationCode(code),


Refactor OAuth a bit to split getting tokens and getting user profile into two steps so it's easier to write a hook onAfterOAuthTokenReceived

infomiho · 2024-04-24T16:49:27Z

waspc/data/Generator/templates/sdk/wasp/server/auth/hooks.ts

+import type { ProviderId, createUser } from '../../auth/utils.js'
+import { prisma } from '../index.js'
+
+type CommonInput = {


Each hook will receive hookName, prisma and Express's req object.

infomiho · 2024-04-24T16:49:54Z

waspc/data/Generator/templates/sdk/wasp/server/auth/hooks.ts

+} & CommonInput
+
+/* On Before OAuth Redirect Hook */
+export type OnBeforeOAuthRedirectHookFn = (


Users have the ability to modify the OAuth redirect URL

infomiho · 2024-04-24T16:52:18Z

waspc/data/Generator/templates/server/src/auth/providers/oauth/user.ts

    const user = await createUser(
      providerId,
      providerData,
      // Using any here because we want to avoid TypeScript errors and
      // rely on Prisma to validate the data.
      userFields as any,
    )
+    if (onAfterSignupHook) {


infomiho · 2024-04-24T16:52:35Z

waspc/data/Generator/templates/server/src/auth/providers/username/signup.ts

@@ -34,13 +35,19 @@ export function getSignupRoute({
    })

    try {
-      await createUser(
+      if (onBeforeSignupHook) {


infomiho · 2024-04-24T16:52:39Z

waspc/data/Generator/templates/server/src/auth/providers/username/signup.ts

        providerId,
        providerData,
        // Using any here because we want to avoid TypeScript errors and
        // rely on Prisma to validate the data.
        userFields as any
      )
+      if (onAfterSignupHook) {


infomiho · 2024-04-24T16:52:50Z

waspc/data/Generator/templates/server/src/auth/providers/email/signup.ts

-            passwordResetSentAt: null,
-        });
+    try {
+      if (onBeforeSignupHook) {


infomiho · 2024-04-24T16:52:54Z

waspc/data/Generator/templates/server/src/auth/providers/email/signup.ts

+        // rely on Prisma to validate the data.
+        userFields as any,
+      )
+      if (onAfterSignupHook) {


infomiho · 2024-05-08T12:10:05Z

waspc/e2e-test/Tests/WaspComplexTest.hs

          "    methods: {",
          "      google: {}",
          "    },",
-          "    onAuthFailedRedirectTo: \"/login\"",
+          "    onAuthFailedRedirectTo: \"/login\",",
+          "    onBeforeSignup: import { onBeforeSignup } from \"@src/auth/hooks.js\",",


I've included hooks in the e2e test

infomiho · 2024-05-08T12:10:23Z

waspc/e2e-test/Tests/WaspComplexTest.hs

      unlines
-        [ "entity SocialLogin {=psl",


I've cleaned up the e2e tests not use old auth concepts 👍

infomiho · 2024-05-08T13:13:19Z

web/docs/auth/auth-hooks.md

+```ts title="src/auth/hooks.ts"
+import type { OnBeforeSignupHookFn } from 'wasp/server/auth'
+
+export const onBeforeSignup: OnBeforeSignupHookFn = async ({ providerId, prisma, req, hookName }) => {


TODO: add better example e.g. throw a HttpError to show an error message on the client.

infomiho · 2024-05-08T13:13:54Z

web/docs/auth/auth-hooks.md

+
+```js title="src/auth/hooks.js"
+export const onAfterSignup = async ({ providerId, user, prisma, req, hookName }) => {
+  // Do something after signup


TODO: add a better example e.g. set a field on the user entity or send data to an external service.

infomiho · 2024-05-08T13:14:42Z

web/docs/auth/auth-hooks.md

+
+```js title="src/auth/hooks.js"
+export const onBeforeOAuthRedirect = async ({ url, prisma, req, hookName }) => {
+  // Do something before OAuth redirect


TODO: show a useful example of setting something in the query params and getting it back in the callback.

infomiho · 2024-05-09T14:08:12Z

@sodic and I jumped on quick call to discuss some of the OAuth hooks since I felt I didn't design them to be that useful.

We concluded the following:

we should remove the onAfterOAuthTokenReceived hook since the developer doesn't have access to user and the accessToken at the same time. This makes the accessToken useless if you want to save it on some user for later use.
- Solution: We'll just forward the accessToken in the onAfterSignup hook. ✅
we should investigate how to have "state" when using the onBeforeOAuthRedirect hook. This is the only OAuth hook where the developer can get some user input from the client. This input gets lost in the follow up hooks e.g. onAfterSignup doesn't have access to it, so it never can be saved on the user entity.
- Idea: It would be ideal to somehow keep track of the user input across the OAuth hooks so the it can be used again in the onAfterSignup hook ✅
- I'll investigate how to best achieve this.

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

infomiho · 2024-05-23T14:54:30Z

waspc/data/Generator/templates/server/src/auth/providers/config/github.ts

@@ -77,13 +77,11 @@ const _waspConfig: ProviderConfig = {

        return createOAuthProviderRouter({
            provider,
-            stateTypes: ['state'],
+            optionalStateTypes: [],


Since the state is always sent and we rely on that knowledge in the new hooks, I've refactored this a bit to reflect the fact that the state will be always present in the oAuthState object.

infomiho · 2024-05-23T14:55:51Z

waspc/data/Generator/templates/server/src/auth/providers/oauth/state.ts

-    setOAuthCookieValue(provider, res, 'state', state);
-    result.state = state;
-  }
+  const state = generateState();


Always set the state since it's always used and will always be used for each future OAuth provider.

infomiho commented Apr 24, 2024

View reviewed changes

infomiho marked this pull request as ready for review May 2, 2024 12:25

infomiho requested a review from sodic May 3, 2024 11:41

infomiho force-pushed the miho-auth-hooks-2 branch from 72dc06f to ff5ce18 Compare May 8, 2024 11:48

infomiho commented May 8, 2024

View reviewed changes

infomiho force-pushed the miho-auth-hooks-2 branch from 2f39592 to 382f643 Compare May 9, 2024 10:40

infomiho added 9 commits May 22, 2024 11:00

WIP auth hooks

58a7236

e2e tests

7bb6304

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

Fixes unit tests

9b05464

Updates changelog

bbf50bc

Auth Hooks docs

55a4919

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

Updates docs with hookName

5c6eaf3

Signed-off-by: Mihovil Ilakovac <mihovil@ilakovac.com>

Update e2e tests to use auth hooks. Cleanup old auth e2e tests.

ae11ad8

Playing around with oauth state WIP

9ca547d

Adds diagrams

9bcd660

infomiho force-pushed the miho-auth-hooks-2 branch from 382f643 to 9bcd660 Compare May 22, 2024 09:09

infomiho added 7 commits May 22, 2024 14:45

Remove "onAfterOAuthTokenReceived" hook

94c9616

Adds accessToken to "onAfterSignup" hook

faa315a

Passing in OAuth state into the hooks

76bb7b2

e2e tests

cf018a5

Update docs

175af98

Make state required. Update params shape.

a383b7d

Updates docs

105fd05

infomiho commented May 23, 2024

View reviewed changes

infomiho added 2 commits May 23, 2024 17:04

Cleanup

6b910ec

Update diagrams

35d3c07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Auth Hooks #1993

Auth Hooks #1993

infomiho commented Apr 24, 2024 •

edited

infomiho Apr 24, 2024

infomiho Apr 24, 2024

infomiho Apr 24, 2024

infomiho Apr 24, 2024

infomiho Apr 24, 2024

infomiho Apr 24, 2024

infomiho Apr 24, 2024

infomiho Apr 24, 2024

infomiho Apr 24, 2024

infomiho Apr 24, 2024

infomiho May 8, 2024

infomiho May 8, 2024

infomiho May 8, 2024

infomiho May 8, 2024

infomiho May 8, 2024

infomiho commented May 9, 2024 •

edited

infomiho May 23, 2024

infomiho May 23, 2024

Auth Hooks #1993

Are you sure you want to change the base?

Auth Hooks #1993

Conversation

infomiho commented Apr 24, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

infomiho commented May 9, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

infomiho commented Apr 24, 2024 •

edited

infomiho commented May 9, 2024 •

edited