feat(nextjs): Support auth().redirectToSignUp()

.changeset/spicy-lizards-take.md

@@ -0,0 +1,17 @@
+---
+'@clerk/nextjs': minor
+---
+
+- Introduce `auth().redirectToSignUp()` that can be used in API routes and pages. Originally effort by [@sambarnes](https://github.com/clerk/javascript/pull/5407)
+
+```ts
+import { clerkMiddleware } from '@clerk/nextjs/server';
+
+export default clerkMiddleware(async (auth) => {
+  const { userId, redirectToSignUp } = await auth();
+
+  if (!userId) {
+    return redirectToSignUp();
+  }
+});
+```

packages/backend/src/createRedirect.ts

@@ -97,7 +97,18 @@ export const createRedirect: CreateRedirect = params => {
     }
 
     const accountsSignUpUrl = `${accountsBaseUrl}/sign-up`;
-    const targetUrl = signUpUrl || accountsSignUpUrl;
+
+    // Allows redirection to SignInOrUp path
+    function buildSignUpUrl(signIn: string | URL | undefined) {
+      if (!signIn) {
+        return;
+      }
+      const url = new URL(signIn, baseUrl);
+      url.pathname = `${url.pathname}/create`;
+      return url.toString();
+    }
+
+    const targetUrl = signUpUrl || buildSignUpUrl(signInUrl) || accountsSignUpUrl;
 
     if (hasPendingStatus) {
       return redirectToTasks(targetUrl, { returnBackUrl });

packages/nextjs/src/app-router/server/auth.ts

@@ -25,6 +25,16 @@ type Auth = AuthObject & {
    * `auth()` on the server-side can only access redirect URLs defined via [environment variables](https://clerk.com/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects) or [`clerkMiddleware` dynamic keys](https://clerk.com/docs/references/nextjs/clerk-middleware#dynamic-keys).
    */
   redirectToSignIn: RedirectFun<ReturnType<typeof redirect>>;
+
+  /**
+   * The `auth()` helper returns the `redirectToSignUp()` method, which you can use to redirect the user to the sign-up page.
+   *
+   * @param [returnBackUrl] {string | URL} - The URL to redirect the user back to after they sign up.
+   *
+   * @note
+   * `auth()` on the server-side can only access redirect URLs defined via [environment variables](https://clerk.com/docs/deployments/clerk-environment-variables#sign-in-and-sign-up-redirects) or [`clerkMiddleware` dynamic keys](https://clerk.com/docs/references/nextjs/clerk-middleware#dynamic-keys).
+   */
+  redirectToSignUp: RedirectFun<ReturnType<typeof redirect>>;
 };
 
 export interface AuthFn {
@@ -83,29 +93,44 @@ export const auth: AuthFn = async () => {
 
   const clerkUrl = getAuthKeyFromRequest(request, 'ClerkUrl');
 
-  const redirectToSignIn: RedirectFun<never> = (opts = {}) => {
+  const createRedirectForRequest = (...args: Parameters<RedirectFun<never>>) => {
+    const { returnBackUrl } = args[0] || {};
     const clerkRequest = createClerkRequest(request);
     const devBrowserToken =
       clerkRequest.clerkUrl.searchParams.get(constants.QueryParameters.DevBrowser) ||
       clerkRequest.cookies.get(constants.Cookies.DevBrowser);
 
     const encryptedRequestData = getHeader(request, constants.Headers.ClerkRequestData);
     const decryptedRequestData = decryptClerkRequestData(encryptedRequestData);
+    return [
+      createRedirect({
+        redirectAdapter: redirect,
+        devBrowserToken: devBrowserToken,
+        baseUrl: clerkRequest.clerkUrl.toString(),
+        publishableKey: decryptedRequestData.publishableKey || PUBLISHABLE_KEY,
+        signInUrl: decryptedRequestData.signInUrl || SIGN_IN_URL,
+        signUpUrl: decryptedRequestData.signUpUrl || SIGN_UP_URL,
+        sessionStatus: authObject.sessionStatus,
+      }),
+      returnBackUrl === null ? '' : returnBackUrl || clerkUrl?.toString(),
+    ] as const;
+  };
+
+  const redirectToSignIn: RedirectFun<never> = (opts = {}) => {
+    const [r, returnBackUrl] = createRedirectForRequest(opts);
+    return r.redirectToSignIn({
+      returnBackUrl,
+    });
+  };
 
-    return createRedirect({
-      redirectAdapter: redirect,
-      devBrowserToken: devBrowserToken,
-      baseUrl: clerkRequest.clerkUrl.toString(),
-      publishableKey: decryptedRequestData.publishableKey || PUBLISHABLE_KEY,
-      signInUrl: decryptedRequestData.signInUrl || SIGN_IN_URL,
-      signUpUrl: decryptedRequestData.signUpUrl || SIGN_UP_URL,
-      sessionStatus: authObject.sessionStatus,
-    }).redirectToSignIn({
-      returnBackUrl: opts.returnBackUrl === null ? '' : opts.returnBackUrl || clerkUrl?.toString(),
+  const redirectToSignUp: RedirectFun<never> = (opts = {}) => {
+    const [r, returnBackUrl] = createRedirectForRequest(opts);
+    return r.redirectToSignUp({
+      returnBackUrl,
     });
   };
 
-  return Object.assign(authObject, { redirectToSignIn });
+  return Object.assign(authObject, { redirectToSignIn, redirectToSignUp });
 };
 
 auth.protect = async (...args: any[]) => {

packages/nextjs/src/server/__tests__/clerkMiddleware.test.ts

@@ -12,6 +12,8 @@ import { clerkMiddleware } from '../clerkMiddleware';
 import { createRouteMatcher } from '../routeMatcher';
 import { decryptClerkRequestData } from '../utils';
 
+vi.mock('../clerkClient');
+
 const publishableKey = 'pk_test_Y2xlcmsuaW5jbHVkZWQua2F0eWRpZC05Mi5sY2wuZGV2JA';
 const authenticateRequestMock = vi.fn().mockResolvedValue({
   toAuth: () => ({
@@ -21,15 +23,6 @@ const authenticateRequestMock = vi.fn().mockResolvedValue({
   publishableKey,
 });
 
-vi.mock('../clerkClient', () => {
-  return {
-    clerkClient: () => ({
-      authenticateRequest: authenticateRequestMock,
-      telemetry: { record: vi.fn() },
-    }),
-  };
-});
-
 /**
  * Disable console warnings about config matchers
  */
@@ -45,6 +38,14 @@ afterAll(() => {
   global.console.log = consoleLog;
 });
 
+beforeEach(() => {
+  vi.mocked(clerkClient).mockResolvedValue({
+    authenticateRequest: authenticateRequestMock,
+    // @ts-expect-error - mock
+    telemetry: { record: vi.fn() },
+  });
+});
+
 // Removing this mock will cause the clerkMiddleware tests to fail due to missing publishable key
 // This mock SHOULD exist before the imports
 vi.mock(import('../constants.js'), async importOriginal => {
@@ -301,84 +302,121 @@ describe('clerkMiddleware(params)', () => {
     });
   });
 
-  describe('auth().redirectToSignIn()', () => {
-    it('redirects to sign-in url when redirectToSignIn is called and the request is a page request', async () => {
+  describe.each([
+    {
+      name: 'auth().redirectToSignIn()',
+      util: 'redirectToSignIn',
+      locationHeader: 'sign-in',
+    } as const,
+    {
+      name: 'auth().redirectToSignUp()',
+      util: 'redirectToSignUp',
+      locationHeader: 'sign-up',
+    } as const,
+  ])('$name', ({ util, locationHeader }) => {
+    it(`redirects to ${locationHeader} url when ${util} is called and the request is a page request`, async () => {
       const req = mockRequest({
         url: '/protected',
         headers: new Headers({ [constants.Headers.SecFetchDest]: 'document' }),
         appendDevBrowserCookie: true,
       });
 
       const resp = await clerkMiddleware(async auth => {
-        const { redirectToSignIn } = await auth();
-        redirectToSignIn();
+        (await auth())[util]();
       })(req, {} as NextFetchEvent);
 
       expect(resp?.status).toEqual(307);
-      expect(resp?.headers.get('location')).toContain('sign-in');
+      expect(resp?.headers.get('location')).toContain(locationHeader);
       expect((await clerkClient()).authenticateRequest).toBeCalled();
     });
 
-    it('redirects to sign-in url when redirectToSignIn is called with the correct returnBackUrl', async () => {
+    it(`redirects to ${locationHeader} url when redirectToSignIn is called with the correct returnBackUrl`, async () => {
       const req = mockRequest({
         url: '/protected',
         headers: new Headers({ [constants.Headers.SecFetchDest]: 'document' }),
         appendDevBrowserCookie: true,
       });
 
       const resp = await clerkMiddleware(async auth => {
-        const { redirectToSignIn } = await auth();
-        redirectToSignIn();
+        (await auth())[util]();
       })(req, {} as NextFetchEvent);
 
-      expect(resp?.status).toEqual(307);
       expect(resp?.status).toEqual(307);
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       expect(new URL(resp!.headers.get('location')!).searchParams.get('redirect_url')).toContain('/protected');
       expect((await clerkClient()).authenticateRequest).toBeCalled();
     });
 
-    it('redirects to sign-in url with redirect_url set to the  provided returnBackUrl param', async () => {
+    it(`redirects to ${locationHeader} url with redirect_url set to the provided returnBackUrl param`, async () => {
       const req = mockRequest({
         url: '/protected',
         headers: new Headers({ [constants.Headers.SecFetchDest]: 'document' }),
         appendDevBrowserCookie: true,
       });
 
       const resp = await clerkMiddleware(async auth => {
-        const { redirectToSignIn } = await auth();
-        redirectToSignIn({ returnBackUrl: 'https://www.clerk.com/hello' });
+        (await auth())[util]({ returnBackUrl: 'https://www.clerk.com/hello' });
       })(req, {} as NextFetchEvent);
 
       expect(resp?.status).toEqual(307);
-      expect(resp?.headers.get('location')).toContain('sign-in');
+      expect(resp?.headers.get('location')).toContain(locationHeader);
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       expect(new URL(resp!.headers.get('location')!).searchParams.get('redirect_url')).toEqual(
         'https://www.clerk.com/hello',
       );
       expect((await clerkClient()).authenticateRequest).toBeCalled();
     });
 
-    it('redirects to sign-in url without a redirect_url when returnBackUrl is null', async () => {
+    it(`redirects to ${locationHeader} url without a redirect_url when returnBackUrl is null`, async () => {
       const req = mockRequest({
         url: '/protected',
         headers: new Headers({ [constants.Headers.SecFetchDest]: 'document' }),
         appendDevBrowserCookie: true,
       });
 
       const resp = await clerkMiddleware(async auth => {
-        const { redirectToSignIn } = await auth();
-        redirectToSignIn({ returnBackUrl: null });
+        (await auth())[util]({ returnBackUrl: null });
       })(req, {} as NextFetchEvent);
 
       expect(resp?.status).toEqual(307);
-      expect(resp?.headers.get('location')).toContain('sign-in');
+      expect(resp?.headers.get('location')).toContain(locationHeader);
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       expect(new URL(resp!.headers.get('location')!).searchParams.get('redirect_url')).toBeNull();
       expect((await clerkClient()).authenticateRequest).toBeCalled();
     });
   });
 
+  describe('auth().redirectToSignUp()', () => {
+    it('to support signInOrUp', async () => {
+      vi.mocked(clerkClient).mockResolvedValue({
+        authenticateRequest: vi.fn().mockResolvedValue({
+          toAuth: () => ({
+            debug: (d: any) => d,
+          }),
+          headers: new Headers(),
+          publishableKey,
+          signInUrl: '/hello',
+        }),
+        // @ts-expect-error - mock
+        telemetry: { record: vi.fn() },
+      });
+
+      const req = mockRequest({
+        url: '/protected',
+        headers: new Headers({ [constants.Headers.SecFetchDest]: 'document' }),
+        appendDevBrowserCookie: true,
+      });
+
+      const resp = await clerkMiddleware(async auth => {
+        (await auth()).redirectToSignUp();
+      })(req, {} as NextFetchEvent);
+
+      expect(resp?.status).toEqual(307);
+      expect(resp?.headers.get('location')).toContain(`/hello/create`);
+      expect((await clerkClient()).authenticateRequest).toBeCalled();
+    });
+  });
+
   describe('auth.protect()', () => {
     it('redirects to sign-in url when protect is called, the user is signed out and the request is a page request', async () => {
       const req = mockRequest({

packages/nextjs/src/server/clerkMiddleware.ts

@@ -17,8 +17,10 @@ import {
   isNextjsNotFoundError,
   isNextjsRedirectError,
   isRedirectToSignInError,
+  isRedirectToSignUpError,
   nextjsRedirectError,
   redirectToSignInError,
+  redirectToSignUpError,
 } from './nextErrors';
 import type { AuthProtect } from './protect';
 import { createProtect } from './protect';
@@ -33,6 +35,7 @@ import {
 
 export type ClerkMiddlewareAuthObject = AuthObject & {
   redirectToSignIn: RedirectFun<Response>;
+  redirectToSignUp: RedirectFun<Response>;
 };
 
 export interface ClerkMiddlewareAuth {
@@ -162,9 +165,13 @@ export const clerkMiddleware = ((...args: unknown[]): NextMiddleware | NextMiddl
       logger.debug('auth', () => ({ auth: authObject, debug: authObject.debug() }));
 
       const redirectToSignIn = createMiddlewareRedirectToSignIn(clerkRequest);
+      const redirectToSignUp = createMiddlewareRedirectToSignUp(clerkRequest);
       const protect = await createMiddlewareProtect(clerkRequest, authObject, redirectToSignIn);
 
-      const authObjWithMethods: ClerkMiddlewareAuthObject = Object.assign(authObject, { redirectToSignIn });
+      const authObjWithMethods: ClerkMiddlewareAuthObject = Object.assign(authObject, {
+        redirectToSignIn,
+        redirectToSignUp,
+      });
       const authHandler = () => Promise.resolve(authObjWithMethods);
       authHandler.protect = protect;
 
@@ -303,6 +310,15 @@ const createMiddlewareRedirectToSignIn = (
   };
 };
 
+const createMiddlewareRedirectToSignUp = (
+  clerkRequest: ClerkRequest,
+): ClerkMiddlewareAuthObject['redirectToSignUp'] => {
+  return (opts = {}) => {
+    const url = clerkRequest.clerkUrl.toString();
+    redirectToSignUpError(url, opts.returnBackUrl);
+  };
+};
+
 const createMiddlewareProtect = (
   clerkRequest: ClerkRequest,
   authObject: AuthObject,
@@ -345,15 +361,21 @@ const handleControlFlowErrors = (
     );
   }
 
-  if (isRedirectToSignInError(e)) {
-    return createRedirect({
+  const isRedirectToSignIn = isRedirectToSignInError(e);
+  const isRedirectToSignUp = isRedirectToSignUpError(e);
+
+  if (isRedirectToSignIn || isRedirectToSignUp) {
+    const redirect = createRedirect({
       redirectAdapter,
       baseUrl: clerkRequest.clerkUrl,
       signInUrl: requestState.signInUrl,
       signUpUrl: requestState.signUpUrl,
       publishableKey: requestState.publishableKey,
       sessionStatus: requestState.toAuth()?.sessionStatus,
-    }).redirectToSignIn({ returnBackUrl: e.returnBackUrl });
+    });
+
+    const { returnBackUrl } = e;
+    return redirect[isRedirectToSignIn ? 'redirectToSignIn' : 'redirectToSignUp']({ returnBackUrl });
   }
 
   if (isNextjsRedirectError(e)) {