New package for integrating Clerk user authentication

[TimChild]

Hey reflex community!!

Just wanted to share that I have create a new and improved Clerk plugin that makes adding user authentication to your app super easy (and free up to 10,000 users!).

It's installable as reflex-clerk-api (to differentiate it from the existing but not maintained reflex-clerk)

You can check out a demo of it in action here
It has documentation and a getting started guide here
And here is the Github repo

For those of you that used reflex-clerk this should be almost a drop in replacement. See notes on migrating.

If this is useful to you, please star the repository!

[jamesalphanome]

Thanks @TimChild, this is great

[jamesalphanome]

Hello @TimChild , I am trying to integrate the reflex-clerk-api into my reflex project, it is working fine locally, but I am getting some errors when I am trying to deploy the app in GCP.
The RUN reflex export --frontend-only --no-zip during the container build process is giving me errors.

Error message:
error: script "export-sitemap" exited with code 1
⨯ Next.js build worker exited with code: 1 and signal: null
Export encountered an error on /, exiting the build.
)
(/app/.web/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4689:7
at renderNodeDestructive
6)
(/app/.web/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4871:1
at retryNode
)
(/app/.web/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4329:7
at renderElement
)
(/app/.web/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4230:9
at finishFunctionComponent
)
(/app/.web/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4689:7
at renderNodeDestructive
6)
(/app/.web/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4871:1
at retryNode
4)
(/app/.web/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4327:1
at renderElement
8)
(/app/.web/node_modules/react-dom/cjs/react-dom-server.edge.production.js:4189:1
at renderWithHooks
(/app/.web/node_modules/@clerk/clerk-react/dist/index.mjs:2159:20)
at ClerkProviderBase
(/app/.web/node_modules/@clerk/shared/dist/chunk-3JHIKPLN.mjs:186:13)
at throwMissingPublishableKeyError
https://dashboard.clerk.com/last-active?path=api-keys.
Error: @clerk/clerk-react: Missing publishableKey. You can get your key at
https://nextjs.org/docs/messages/prerender-error
Error occurred prerendering page "/". Read more:
https://dashboard.clerk.com/last-active?path=api-keys.]
[Error: @clerk/clerk-react: Missing publishableKey. You can get your key at
Generating static pages (0/3) ...
Collecting page data ...
✓ Compiled successfully
Creating an optimized production build ...
Linting and checking validity of types ...
▲ Next.js 15.2.4
https://nextjs.org/telemetry
this anonymous program, by visiting the following URL:
You can learn more, including how to opt-out if you'd not like to participate in
This information is used to shape Next.js' roadmap and prioritize features.
Attention: Next.js now collects completely anonymous telemetry regarding usage.
$ next build && next-sitemap
Creating Production Build failed with exit code 1
[15:20:53] Compiling: ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 100% 16/16 0:00:00
────────────── Compiling production app and preparing for export. ──────────────
---> Running in bb8169569353
Step 10/13 : RUN reflex export --frontend-only --no-zip && mv .web/_static/* /srv/ && rm -rf .web

I have given the key in the env in GCP. Do you have any idea why this is happening? thanks

[TimChild]

I looks like the CLERK_PUBLISHABLE_KEY is not set within the container that is running the build. I'd try to confirm that first.

You can also look at my deployment workflows. I'm always careful to check expected env vars are actually set because it causes so many headaches when they are accidentally blank. e.g. within my github workflow:

     - name: Check env vars set
        run: |
          if [ -z "${{ vars.CLERK_PUBLISHABLE_KEY }}" ]; then
            echo "CLERK_PUBLISHABLE_KEY is not set"
            exit 1
          fi

I then create a temporary .env file in the runner:

      - name: Create .env
        run: |
          echo "CLERK_PUBLISHABLE_KEY=${{ vars.CLERK_PUBLISHABLE_KEY }}" >> .env

I build the frontend static files via reflex export --frontend-only in the Github runner rather than in a dockerfile, but it's pretty similar.

    - name: Build frontend
      shell: bash
      working-directory: ${{ inputs.working-directory }}
      run: |
        mkdir -p "tmp_frontend_zip"
        mkdir -p "site"
        uv run reflex export --frontend-only --zip-dest-dir "tmp_frontend_zip"
        unzip -q tmp_frontend_zip/frontend.zip -d site/
        rm -r "tmp_frontend_zip"

No reason that it shouldn't also work in your Docker build too.