redirectToSignIn not respecting publishableKey passed to authMiddleware

[dcyoung]

I'm using a custom env var naming scheme in order to provide env vars at deploy time.
I am able to supply the publishableKey as a parameter to the middleware,

export default authMiddleware({
 publishableKey: process.env.ENV_VAR_NAME,
 async afterAuth(auth, req, evt) {
 if (!auth.isPublicRoute ) {
 if (!auth.userId) {
 // eslint-disable-next-line @typescript-eslint/no-unsafe-return
 return redirectToSignIn({

but when I call redirectToSignIn within afterAuth, I am getting an error:

Server Error
Error: Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
src/middleware.ts (45:40) @ afterAuth

 44 | // eslint-disable-next-line @typescript-eslint/no-unsafe-return
> 45 | return redirectToSignIn({
 | ^
 46 | returnBackUrl: ...,
 48 | });

[dimkl]

Hello @dcyoung
It seems that custom environment variables for that use case are not currently supported. Let me take a look and provide you with a workaround.

[dimkl]

Hello @dcyoung
we are iterating over our API to support this case but currently, I would suggest you try to pass the specific env variable if it's possible. If it's not, I think you could use the draft code below.

// helper.ts - edited copy of packages/nextjs/src/server/redirect.ts
import { constants, redirect } from '@clerk/backend';
import { NextResponse } from 'next/server';

export const setHeader = (res: Response, name: string, val: string) => {
 res.headers.set(name, val);
 return res;
};

const redirectAdapter = (url: string) => {
 const res = NextResponse.redirect(url);
 return setHeader(res, constants.Headers.ClerkRedirectTo, 'true');
};

export const { redirectToSignIn, redirectToSignUp } = redirect({
 redirectAdapter,
 signInUrl: '<your value if needed>',
 signUpUrl: '<your value if needed>',
 publishableKey: '<your value if needed>',
});

// middleware.ts
import { customRedirectToSignIn } from './helper.ts'; // file above

authMiddleware({
 afterAuth: (auth: AuthObject, req) => {
 // ....
 return customRedirectToSignIn({ returnBackUrl: req.experimental_clerkUrl.href });
 // ...
 }
});

I will ping you back when a fix or workaround is available.

[clerk-cookie]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[clerk-cookie]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.