fix: yarn rw setup auth clerk fails in canary

[jtoar]

While reviewing #5969, I upgraded a redwood app to canary and tried to setup clerk but it failed with:

~/rwprj> yarn rw setup auth clerk
✔ Overwrite existing /api/src/lib/auth.[jt]s? … yes
rwprj/node_modules/@redwoodjs/cli/dist/commands/setup/auth/auth.js:147
  const customRenderOpen = (0, _reduce.default)(_context6 = authProvider.render || []).call(_context6, (acc, component) => acc + newlineAndIndent + '  ' + `<${component}>`, '');
                                                                                      ^

TypeError: Cannot read properties of undefined (reading 'call')
    at addWebRender (/Users/dom/prjcts/rwprj/rwprj/node_modules/@redwoodjs/cli/dist/commands/setup/auth/auth.js:147:87)
    at addConfigToApp (/Users/dom/prjcts/rwprj/rwprj/node_modules/@redwoodjs/cli/dist/commands/setup/auth/auth.js:253:15)
    at Task.task (/Users/dom/prjcts/rwprj/rwprj/node_modules/@redwoodjs/cli/dist/commands/setup/auth/auth.js:381:9)
    at /Users/dom/prjcts/rwprj/rwprj/node_modules/listr/lib/task.js:167:30
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

I pinpointed it to a change in #4880. This new line:

redwood/packages/cli/src/commands/setup/auth/providers/clerk.js

Line 34 in 222adee

render: 'ClerkAuthProvider',

Turns it out has to be an array of strings cause reduce gets called on it later here:

redwood/packages/cli/src/commands/setup/auth/auth.js

Lines 123 to 126 in 222adee

	const customRenderOpen = (authProvider.render || []).reduce(
	(acc, component) => acc + newlineAndIndent + ' ' + `<${component}>`,
	''
	)

Not a big deal right now. But all the more reason to either...

• add unit tests for setup commands, or
• use some TS in the cli package

[netlify]

✅ Deploy Preview for redwoodjs-docs canceled.

Name	Link
🔨 Latest commit	14913b0
🔍 Latest deploy log	https://app.netlify.com/sites/redwoodjs-docs/deploys/62da7cfd1bdf02000992d3ae

[jtoar]

Now that it succeeded, I'm noticing something else maybe. In ClerkAuthProvider, where does navigate come from? Is it supposed to be imported from @redwoodjs/router?

const ClerkAuthProvider = ({ children }) => {
  const frontendApi = process.env.CLERK_FRONTEND_API_URL
  if (!frontendApi) {
    throw new Error('Need to define env variable CLERK_FRONTEND_API_URL')
  }

  return (
    <ClerkProvider frontendApi={frontendApi} navigate={(to) => navigate(to)}> // do we need to import this?
      <ClerkLoaded>
        {children}
      </ClerkLoaded>
    </ClerkProvider>
  )
}

See this fixture in the associated codemods PR for more context:

redwood/packages/codemods/src/codemods/v2.x/updateApp/__testfixtures__/app.output.js

Line 19 in c8a9bc6

<ClerkProvider frontendApi={frontendApi} navigate={(to) => navigate(to)}>

[Tobbe]

Not a big deal right now. But all the more reason to either...

• add unit tests for setup commands, or
• use some TS in the cli package

I'm all for switching to TS (no big surprise I guess). But both options sounds good. One or the other, or both.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 14913b0. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 14 targets

• cli run test --concurrency 2 -- --colors --maxWorkers 2
• cli run test --concurrency 2 -- --colors --maxWorkers 2
• cli run build
• cli run test --concurrency 2 -- --colors --maxWorkers 2
• cli run test --concurrency 2 -- --colors --maxWorkers 2
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build

---

Sent with 💌 from NxCloud.

[Tobbe]

Now that it succeeded, I'm noticing something else maybe. In ClerkAuthProvider, where does navigate come from? Is it supposed to be imported from @redwoodjs/router?

Yes, you are right. But I think it already is, at least it was for me just now when I tried.

It's also part of the clerk setup script

BUT I think I missed that in the codemods. Will double check and address in #5969 if needed