clerk / javascript Goto Github PK

View Code? Open in Web Editor NEW

875.0 10.0 196.0 176.5 MB

Official Javascript repository for Clerk authentication

Home Page: https://clerk.com

License: MIT License

JavaScript 1.19% Shell 0.06% TypeScript 97.87% CSS 0.61% Cap'n Proto 0.01% HTML 0.19% EJS 0.08%

authentication nextjs react nodejs javascript expo remix-run jwt-authentication jwt hasura

javascript's Introduction

Official Clerk JavaScript SDKs

Clerk helps developers build user management. We provide streamlined user experiences for your users to sign up, sign in, and manage their profile.

This repository contains all the Clerk JavaScript SDKs under the @clerk namespace. Visit clerk.com to signup for an account.

Clerk is Hiring!

Would you like to work on Open Source software and help maintain this repository? Apply today!.

🚀 Get Started with Clerk

Sign up for an account
Create an application in your Clerk dashboard
Spin up a new codebase with one of the quickstart guides

This repository contains the SDKs for environment/platforms that Clerk supports. For example, if you want to use Clerk with Node.js you can install:

npm install @clerk/clerk-sdk-node
# or
yarn add @clerk/clerk-sdk-node
# or
pnpm add @clerk/clerk-sdk-node

🎓 Learning Clerk

Clerk's full documentation is available at clerk.com/docs.

We recommend starting with the Quickstart guides. It'll enable you to quickly add Clerk to your application. If you're starting a new project and are not sure what to pick, use Next.js and @clerk/nextjs.
To learn more about Clerk's components and features, checkout the rest of the Clerk documentation. You'll be able to e.g. browse the component reference page.

🚢 Release Notes

Curious what we shipped recently? You can browse the GitHub Releases page or look at the individual CHANGELOG.md files inside each package (e.g. clerk-js CHANGELOG).

🤝 How to Contribute

We're open to all community contributions! If you'd like to contribute in any way, please read our contribution guidelines. We'd love to have you as part of the Clerk community!

It'll show you how to make changes to the SDKs, open pull requests, or submitting issues. If you want to add or edit localizations (e.g. how a button text is translated to your language), you can check out the localizations README.

📝 License

This project is licensed under the MIT license.

See LICENSE for more information.

javascript's People

Contributors

Stargazers

Watchers

Forkers

authdog-oss deriegle torbjornholtmon dvargas92495 jtparrett nicksrandall danestves waveywaves notrab elitan 100kb franciscop edsonacortese perevezencev adri1wald nitroin arjunyel darlantc mewben ghchrissu igassmann charltoons rowandh 1thorarinn waldothedeveloper carstenlebek kristersd brianluong idanrozin vancegillies paygroup appden calicastle burkov danielegelund ehesp timbroddin urnas harrisrobin riipandi greguintow danielyanzu adidoes andykenward atsjj matukosan orjdev nnxn3323 robertovillegas kinggoesgaming jibon1996 spencercorwin charlie-hadden jmarbutt dominictwlee brunoschmidt razlevio tmilewski dninomiya gibitop apolat2000 pdolezal0 kaploink primaryco jeanlucaslima lightninghimanshu enriskumi mikestopcontinues richard87 kohort-aymeric gustavo-pauli royanger kungfu321 yardie83 prokopschield teceer lll-lll-lll-lll nizar787 emmanouelapothitou mwerder gitarthakalita getaaron l0st0 octoper pierrec1024 ikembakwem flybayer demptd13 junghoonghae danilofuchs theo-lubert james-fl0 jacoblindelof dawid-grabowski sureshkuchana hudovisk ta3 datairisplatform ahmedrowaihi mohanadoo

javascript's Issues

yarn peerDependencies issue

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

node 18.7.0
yarn 3.2.2

Browser/OS

On development side

Description

✗ yarn
➤ YN0000: ┌ Resolution step
➤ YN0002: │ @clerk/edge@npm:1.7.5 doesn't provide react (pda14f), requested by next
➤ YN0002: │ @clerk/edge@npm:1.7.5 doesn't provide react-dom (pe2ef3), requested by next
➤ YN0002: │ @clerk/nextjs@npm:4.0.2 [1a981] doesn't provide react (p632b5), requested by @clerk/clerk-react

Next 13 /app directory error - Functions cannot be passed directly to Client Components because they're not serializable

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

4.8.0

Browser/OS

Chrome, Next13 app directory project deployed on Vercel

Description

I created an app following the docs for using Clerk with Next server components. The app deployed fine and I could log in and got redirected to the home page. After refresh however the page crashes and doesn't display anything. This is the error from the Vercel dashboard

2023-02-05T14:57:47.184Z	42ab5f16-7291-4f3e-a8f7-401d8efe4d35	ERROR	Error: Functions cannot be passed directly to Client Components because they're not serializable.
  {actor: undefined, sessionClaims: ..., sessionId: ..., session: ..., userId: ..., user: ..., orgId: ..., orgRole: ..., orgSlug: ..., organization: ..., getToken: function, debug: ...}
                                                                                                                                                                    ^^^^^^^^
    at Ma (/var/task/apps/web/.next/server/chunks/3.js:13404:27)
    at Object.toJSON (/var/task/apps/web/.next/server/chunks/3.js:13163:32)
    at stringify (<anonymous>)
    at V (/var/task/apps/web/.next/server/chunks/3.js:13462:53)
    at ping (/var/task/apps/web/.next/server/chunks/3.js:13262:43)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
2023-02-05T14:57:47.185Z	42ab5f16-7291-4f3e-a8f7-401d8efe4d35	ERROR	[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '2548614894'
}

The root layout is basically the same as the example in the docs and the home page doesn't use any Clerk components or hooks. Client components on another page using useAuth from @clerk/nextjs/app-beta/client throw the same error.

getServerData Support

First, this plugin is great! Probably the most seamless auth experience I've had in a while.

I'm looking to add support for SSR auth with Gatsby. Since Gatsby 4 in October 2021, Gatsby has supported SSR rendering pages outside of SSG. The pattern is similar to Next.js, but has a few differences. I have found that using the withServerSideAuth function basically works with Gatsby, but I'm not sure it's working as well as it could.

First Gatsby relies on exporting an async function called getServerData. That makes following the HOC pattern difficult. When trying to copy and paste the example directly, the context will be undefined inside withServerSideAuth:

export const getServerData = withServerSideAuth(({ req, resolvedUrl }) => {
  const { sessionId } = req.auth

  if (!sessionId) {
    return { redirect: { destination: '/sign-in?redirect_url=' + resolvedUrl } }
  }

  return { props: {} }
})

The Gatsby pattern looks more like this:

export async function getServerData(context) {
  try {
    withServerSideAuth(context)

    return {
      status: 200, 
      props: {
        test: 'foo',
      },
      headers: {},
    }
  } catch (err) {
    console.log(err)
    return {
      status: 500,
      headers: {},
      props: {},
    }
  }
}

With this pattern, the auth actually seems to work (it redirects to the auth url from Clerk), so I assume the Node logic from the Clerk library is working. When logged in, it successfully renders the page. But note that there is no callback to get the sessionId or resolvedUrl.

My guess is that this plugin could have an ssr folder that tweaks this same logic slightly and allows for SSR auth with Gatsby as well. Something like this:

import { serverSideAuth } from 'gatsby-plugin-clerk'

// ... components

export async function getServerData(context) {
  try {
    const auth = await serverSideAuth(context)

  const { sessionId } = auth.req;

  if (!sessionId) {
    return { redirect: { destination: "/sign-in?redirect_url=" + resolvedUrl } };
  }


    return {
      status: 200, 
      props: {
        test: 'foo',
      },
      headers: {},
    }
  } catch (err) {
    console.log(err)
    return {
      status: 500,
      headers: {},
      props: {},
    }
  }
}

Or the callback could be passed in to serverSideAuth as well. Either way, I think the existing Next.js pattern is already very, very close to what would work here, with maybe additional tweaks to sanitizing/serializing props that might not be needed.

Happy to help with this, thanks!

Embed Clerk React components to site with root's element font-size 1px;

Hi!

For our site we have the following global CSS:

:root, 
:host {
  font-size: 1px;
}

We do it to use clear sizes like 12rem, 18rem, 24rem in our styles. We don't want to sit with a calculator for 0.35rem, 0.68rem, etc.

This is how <UserProfile /> component looks on our page.

I'm not CSS pro, but probably you can consider switching to custom units like those described here:
w3c/csswg-drafts#7613
w3c/csswg-drafts#7379

I mean something like:

:root {
  --cl-px: 1rem; /* Your customer can override this variable in his code. */
}

/* In your code it could look like it. */
.cl-card {
  max-width: calc(320 * var(--cl-px));
}

This way you can don't worry anymore that some customers for some reason use non-16px rems.

If you know a less ugly way to fix it on our side, please tell me.

Now we'll just spend a couple of hours rewriting our CSS to px. Not a big deal for the current project, but it would be great if we could use Clerk React components in other projects without rewriting our styles.

Thank you.

Property 'env' is missing in type is missing in Next API Request with auth prop

Package + Version

Description

Argument of type '(req: WithAuthProp<NextApiRequest>, res: NextApiResponse) => void' is not assignable to parameter of type 'Middleware'.
  Types of parameters 'req' and 'req' are incompatible.
    Type 'WithAuthProp<Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>>' is not assignable to type 'WithAuthProp<NextApiRequest>'.
      Property 'env' is missing in type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>> & { auth: { sessionId: string | null; userId: string | null; getToken: ServerGetToken; claims: ClerkJWTClaims | null; }; }' but required in type 'NextApiRequest'.ts(2345)

Here is the code:

// pages/api/get-authenticated-user.ts
import { withAuth, WithAuthProp } from '@clerk/nextjs/api';
import type { NextApiRequest, NextApiResponse } from 'next';

export default withAuth(
  (req: WithAuthProp<NextApiRequest>, res: NextApiResponse) => {
    const { sessionId } = req.auth;

    if (!sessionId) {
      return res.status(401).json({ id: null });
    }

    return res.status(200).json({ id: sessionId });
  }
);

Session already exists error doesn't get forwarded so we can't handle it

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

3.6.1

Browser/OS

If applicable e.g. Chrome latest

Description

When trying to register a user while a session already exists the error thrown simply says "Error:"

To find out that the session already existed I had to view the request response in dev tools to see the payload error.

Simple fix is to just forward that error on so we can check for it.

Missing named export `withAuth` making the prisma-fastify starter not work

This https://github.com/clerkinc/clerk-fastify-react-prisma-starter doesn't work with latest version(4.6.2) of the clerk node sdk because withAuth is not exported.

backend-core: Cannot find type definition file for 'web'. ts(2688)

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

@clerk/clerk-sdk-node: ^3.2.2
@clerk/backend-core: ^1.1.0
@clerk/types: ^2.2.0

Browser/OS

OSX 12.3
Nodejs 16.14.2
Typescript 4.6.3

Description

My backend project refuses to compile correctly.

tsconfig.json:

{
    "compilerOptions": {
        "lib": ["es2020", "dom"],
        "target": "es2020",
        "module": "CommonJS",
        "sourceMap": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "baseUrl": "./src",
        "outDir": "./build",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "esModuleInterop": true,
        "strictNullChecks": true
    },
    "files": ["..."],
    "include": ["src/**/*.ts"]
}

Compilation errors :

node_modules/@clerk/backend-core/dist/cjs/api/resources/Props.d.ts(1,23): error TS2688: Cannot find type definition file for 'web'.
node_modules/@clerk/backend-core/dist/cjs/Base.d.ts(1,23): error TS2688: Cannot find type definition file for 'web'.
node_modules/@clerk/backend-core/dist/cjs/util/types.d.ts(1,23): error TS2688: Cannot find type definition file for 'web'.

It comes from /// <reference types="web" />

What is weird is that I do not have this issue in my nextjs frontend, with the same @clerk/backend-core version (same typescript, nodejs and @clerk/clerk-sdk-node).

But even in my nextjs project: when I open Props.d.ts or Base.d.ts or types.d.ts: it says Cannot find type definition file for 'web'.ts(2688). But it compiles.

I tried several tsconfig changes. Nothing is working.

Any idea ?

Thanks.

Public metadata must be a string containing a valid JSON object

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

"@clerk/clerk-sdk-node": "^4.0.2",
"@clerk/nextjs": "^4.0.2",

Browser/OS

Chrome latest

Description

import clerk from '@clerk/clerk-sdk-node'
import { withAuth } from '@clerk/nextjs/api'

/**
 * invite a user by email
 */
const invite = withAuth(async (req, res) => {
  if (req.method === 'POST') {
    const { userId } = req.auth
    if (!userId) {
      return res.status(401).json('no userId found')
    }
    const publicMetadata = Object.create(null)
    publicMetadata.userType = 'invite'
    const response = await clerk.invitations.createInvitation({
      emailAddress: req.body.email_address,
      publicMetadata: {
        type: 'invite'
      }
    })
    res.json(response)
    res.status(200)
  } else if (req.method === 'GET') {
    res.json(
      await clerk.invitations.getInvitationList()
    )
  }
})

export default invite

error - ClerkAPIResponseError: Unprocessable Entity
    at Object.request (/Users/himself65/Code/textea-sheet/node_modules/@clerk/clerk-sdk-node/dist/Clerk.js:56:31)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Clerk.request (/Users/himself65/Code/textea-sheet/node_modules/@clerk/backend-core/dist/cjs/api/ClerkBackendApi.js:46:22)
    at async eval (webpack-internal:///(api)/./src/pages/api/invite.ts:27:26)
    at async Object.apiResolver (/Users/himself65/Code/textea-sheet/node_modules/next/dist/server/api-utils/node.js:184:9)
    at async DevServer.runApi (/Users/himself65/Code/textea-sheet/node_modules/next/dist/server/next-server.js:403:9)
    at async Object.fn (/Users/himself65/Code/textea-sheet/node_modules/next/dist/server/base-server.js:493:37)
    at async Router.execute (/Users/himself65/Code/textea-sheet/node_modules/next/dist/server/router.js:222:36)
    at async DevServer.run (/Users/himself65/Code/textea-sheet/node_modules/next/dist/server/base-server.js:612:29)
    at async DevServer.run (/Users/himself65/Code/textea-sheet/node_modules/next/dist/server/dev/next-dev-server.js:569:20) {
  clerkError: true,
  status: 422,
  errors: [
    {
      code: 'form_param_value_invalid',
      message: 'Public metadata must be a string containing a valid JSON object. To reset the public metadata, use an empty JSON object ("{}").',
      longMessage: 'Public metadata must be a string containing a valid JSON object. To reset the public metadata, use an empty JSON object ("{}").',
      meta: [Object]
    }
  ],
  page: '/api/invite'
}

Use React18 in clerk-js

wip

Stricter tsconfig.json options generate tsc errors in @clerk/backend-core

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
~~Provide the Frontend API key from your application dashboard.~~

Package + Version

Version:

@clerk/remix: 0.5.13
@clerk/remix: 1.1.0

Browser/OS

GitHub Actions — ubuntu-latest, macOS locally in development

Description

Following the setup instructions from the "Getting started" section in the clerkinc/remix-auth-starter repository and adding the following stricter settings to the tsconfig.json file:

    "exactOptionalPropertyTypes": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "skipLibCheck": true,

Then run:

npx tsc

This will produce a number of errors originating from:

node_modules/@clerk/backend-core/

It seems like we should be able to apply these stricter options in our application's tsconfig.json without it leaking into the Clerk library to produce these errors? I haven't seen this in other libraries our application consumes with these same options applied. The only workaround I've found is to remove these options to match the standards set by the Clerk library.

The addition of skipLibCheck is the workaround from #155 which also feels like an option we also shouldn't have to supply in the tsconfig.json.

Related or Similar:

🙌 Thanks in advance and let me know if I can provide any other information.

Bug: atob invalid character exception

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

4.5.2 also tested on latest 4.6.5

Browser/OS

If applicable e.g. Chrome latest

Description

When using a custom session claims with profile_image the Clerk getAuth function breaking on invalid character using atob function. Getting the session token and unwrapping the image url is set to "profile_image": "https://www.gravatar.com/avatar?d=mp" and we think the = is probably breaking it. Here is the stack trace

Here is our custom claims object

{
	"email": "{{user.primary_email_address}}",
	"user_id": "{{user.id}}",
	"last_name": "{{user.last_name}}",
	"first_name": "{{user.first_name}}",
	"email_verfied": "{{user.email_verified}}"
}

Stack trace error on login

error - DOMException [InvalidCharacterError]: Invalid character
    at atob (node:buffer:1247:13)
    at parseRequest (/Users/arashsoheili/Code/caredge-app/node_modules/@clerk/nextjs/dist/server/utils/getAuth.js:49:38)
    at /Users/arashsoheili/Code/caredge-app/node_modules/@clerk/nextjs/dist/server/utils/getAuth.js:24:61
    at eval (webpack-internal:///(api)/./src/api/common/handler/method.ts:67:83)
    at resolver (webpack-internal:///(api)/./src/api/common/handler/index.ts:109:19)
    at Object.apiResolver (/Users/arashsoheili/Code/caredge-app/node_modules/next/server/api-utils/node.ts:522:11)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async DevServer.runApi (/Users/arashsoheili/Code/caredge-app/node_modules/next/server/next-server.ts:789:5) {
  page: '/api/auth/vehicles-owned'
}

Have tested removing the profile_image from custom session and we then have no issues.

The atob function is deprecate. Here is the docs from nodejs

This function is only provided for compatibility with legacy web platform APIs and should never be used in new code, because they use strings to represent binary data and predate the introduction of typed arrays in JavaScript. For code running using Node.js APIs, converting between base64-encoded strings and binary data should be performed using Buffer.from(str, 'base64') and buf.toString('base64').

Remix experimental cloudflare pages

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

1.4.0-staging.4

Browser/OS

If applicable e.g. Chrome latest

Description

I want to get the User object within a loader.
So i used import {clerk} from "@clerk/remix/experimental/api.server".

I receive following error:

Error: Missing Clerk API Key. Go to https://dashboard.clerk.dev and get your Clerk API Key for your instance.
...

I think it is related to follwing file.
https://github.com/clerkinc/javascript/blob/f6ef89d301f72efa3d1b1151162d6d17629c64f9/packages/remix/src/experimental/clerk.ts#L5

it works in the rootAuthLoader because there the variable is read from the context object.

Am i missing something?

Provide <ClerkProvider> with existing Clerk client

Package

Description

It would be nice to be able to provide the <ClerkProvider> component in @clerk/clerk-react with an already existing Clerk client so that I only have one active Clerk client on my website. Right now I have to pass a frontend api key and it spins up its own client which is a small problem because it executes extra requests for the client created in react.

// clerk.ts
import Clerk from "@clerk/clerk-js";

export const frontendApi = import.meta.env.VITE_CLERK_FRONTEND_API;
export const clerk = new Clerk(frontendApi);
clerk.load();

// App.tsx
import {
  ClerkProvider,
  RedirectToSignIn,
  SignedIn,
  SignedOut,
} from "@clerk/clerk-react";
import { ProtectedApp } from "./ProtectedApp.js";
import { frontendApi } from "./clerk.js";

export const App = () => {
  return (
    <ClerkProvider frontendApi={frontendApi}>
      <SignedIn>
        <ProtectedApp />
      </SignedIn>
      <SignedOut>
        <RedirectToSignIn />
      </SignedOut>
    </ClerkProvider>
  );
};

I want this

import { clerk} from "./clerk.js";

...

<ClerkProvider client={clerk}>

backend-core typescript error

A typescript error is being thrown from @clerk/backend-core when running tsc --noEmit on my project which uses @clerk/remix

node_modules/@clerk/backend-core/src/api/utils/RestClient.ts:77:7 - error TS2322: Type 'object | undefined' is not assignable to type 'Record<string, unknown> | undefined'.
  Type 'object' is not assignable to type 'Record<string, unknown>'.
    Index signature for type 'string' is missing in type '{}'.

77       body,
         ~~~~

  node_modules/@clerk/backend-core/src/api/utils/RestClient.ts:31:5
    31     body?: Record<string, unknown>;
           ~~~~
    The expected type comes from property 'body' which is declared here on type '{ method: "GET" | "POST" | "PATCH" | "DELETE" | "PUT"; authorization: string; contentType: string; userAgent: string; body?: Record<string, unknown> | undefined; }'

https://github.com/clerkinc/javascript/blob/3c73b5ac4a3de34011a1f05852681b19ab50aa2c/packages/backend-core/src/api/utils/RestClient.ts#L77

Rollup cannot not resolve './Crypto' from @clerk/clerk-sdk-node/esm/utils/index.js

Package + Version

Version:

'@cleark/clerk-sdk-node': 4.1.3

Description

Rollup consistently returned the following message from a GitHub Actions job:

Error: Could not resolve './Crypto' from node_modules/@clerk/clerk-sdk-node/esm/utils/index.js

Due to the following import statement:

// node_modules/@clerk/clerk-sdk-node/esm/index.js
export * from './Crypto';

The file structure for the issue is as follows:

# within node_modules/@clerk:
clerk-sdk-node/
|-- esm/
|    |-- utils/
|         |-- crypto.js
|         |-- index.js

After some digging, I found this commit in a merged Rollup PR stating that imports are case sensitive.

Thus, it seems that because the import statement reads ./Crypto instead of ./crypto, the Rollup error is triggered.

I was able to work around this by using patch-package to fix the casing in the import statement.

To be honest, I'm not sure if this error is a non-issue from Clerk's side (perhaps there's a Rollup setting I overlooked) but hopefully this can help anyone else dealing with the same issue.

If this is a valid oversight from Clerk's side, let me know and I'll submit a PR request :)

True i18n for transactional emails

Package

Description

Only one template (per email type - i.e. welcome, invitation, OTP, etc) is allowed for transactional emails.
We need to produce an app for several languages, and so we miss a way to manage them.

Any idea about some solutions and a roadmap?

Thanks.

Invalid state error after changing username

Package + Version

@clerk/clerk-react

Version:

4.7.0

Browser/OS

If applicable e.g. Chrome latest

Description

I created a Clerk application.
Signed in as a new user.
Enabled the checkbox to allow users to change their usernames.
Now I encounter an error when I'm trying to change my username. Sometimes (maybe once in 10 times) it randomly works as expected.

Screen.Recording.2022-12-24.at.12.49.13.PM.mov

After the page reload, the username has been changed.

For newly created users, setting a username always works correctly.

Minor visual issue - phone code area overflow

Package + Version

@clerk/clerk-react

Version:

4.7.0

Browser/OS

If applicable e.g. Chrome latest

Description

If remove the min-height property for . cl-selectButton, it looks OK.

> 4.2.1 - Redwood JS API Server throws error

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

> 4.2.1

Browser/OS

API Backend only

Description

When using the latest Redwood JS, getting the following error:

api | 11:03:09 🚨 graphql-server Error building context. Error: Exception in getAuthenticationContext: Cannot find module './dist/instance'
api | Require stack:
api | - /Users/ariperez/github/beacon-redwood/node_modules/@clerk/clerk-sdk-node/instance.js
api | - /Users/ariperez/github/beacon-redwood/node_modules/@redwoodjs/api/dist/auth/decoders/clerk.js
api | - /Users/ariperez/github/beacon-redwood/node_modules/@redwoodjs/api/dist/auth/decoders/index.js
api | - /Users/ariperez/github/beacon-redwood/node_modules/@redwoodjs/api/dist/auth/index.js
api | - /Users/ariperez/github/beacon-redwood/node_modules/@redwoodjs/api/dist/index.js
api | - /Users/ariperez/github/beacon-redwood/node_modules/@redwoodjs/graphql-server/dist/functions/graphql.js
api | - /Users/ariperez/github/beacon-redwood/node_modules/@redwoodjs/graphql-server/dist/index.js
api | - /Users/ariperez/github/beacon-redwood/api/dist/functions/graphql.js
api | - /Users/ariperez/github/beacon-redwood/node_modules/@redwoodjs/api-server/dist/plugins/lambdaLoader.js
api | - /Users/ariperez/github/beacon-redwood/node_modules/@redwoodjs/api-server/dist/plugins/withFunctions.js
api | - /Users/ariperez/github/beacon-redwood/node_modules/@redwoodjs/api-server/dist/cliHandlers.js
api | - /Users/ariperez/github/beacon-redwood/node_modules/@redwoodjs/api-server/dist/index.js

@Clerk/remix broken SSR

Package + Version

@clerk/remix

Version:

0.3.5

Description

After upgrading to version 0.3.5 of clerk/remix SSR seems to no longer work.

Everything has been configured per the clerk/remix setup instructions.
Here is my root loader (note loadUser):

export const loader: LoaderFunction = (args) =>
  rootAuthLoader(
    args,
    {
      loadUser: true,
    }
  )

Here's my page:

const Page = () => {
  const auth = useAuth()
  
  console.log(auth)
  
  if(auth.isSignedIn){
    return <p>Some user!</p>
  }
  
  return <p>No user!</p>
}

On the server the log is like so:

{
  isLoaded: true,
  isSignedIn: false,
  sessionId: null,
  userId: null,
  signOut: [AsyncFunction (anonymous)],
  getToken: [AsyncFunction (anonymous)]
}

On the client the log is like so:

isLoaded: true
isSignedIn: true
sessionId: "..."
userId: "..."
signOut: async (...args) => {…}
getToken: async (options) => {…}

The end result for the user is a flash on page load which shows "No user", and then it switches to "Some user!" once the client has finished loading.

Shared package has unnecessary peer dependency on `react-test-renderer`

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

0.8.3

Browser/OS

N/A

Description

As you can see here, the package.json for the shared package includes a dependency on react-test-renderer.

This appears to have been missed in this PR from a month ago. It should be moved to a devDependency as it is not needed in production and is causing warnings when using clerk.

If someone already has a fork locally and could PR this change, I would appreciate it.

`WithClerkState.data` prop should be optional

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.
- clerk.rjzug.yeali.lcl.dev

Package + Version

Version:

0.1.0-alpha.0

Browser/OS

Chrome latest

Description

Currently the type, WithClerkState, associated with being used with useLoaderData has a type that implies that the data prop is guaranteed: https://github.com/clerkinc/javascript/blob/next/packages/remix/src/ssr/types.ts#L5-L8.

However, when trying out the package with my project, data was undefined bc an interstitial was returned from getAuthData in rootAuthLoader: https://github.com/clerkinc/javascript/blob/next/packages/remix/src/ssr/rootAuthLoader.ts#L28-L30

So, this leads me to the following questions/suggestions, in order of preference:

What is interstitial? Ideally, getAuthData would return the user either logged in or out and then I would have my data returned.
If interstitial is kept, could we return data so that I always have access to it?
If I cannot keep data, then it should be optional on WithClerkState

Middleware not working with latest version of Next Js

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

3.6.8

Browser/OS

If applicable e.g. Chrome latest

Description

Currently when running the latest version of Next Js 12.2.0 the following code:

export default withEdgeMiddlewareAuth((req) => {
  console.log('Middleware')
})

Throws the error: [Error: A middleware can not alter response's body. Learn more: https://nextjs.org/docs/messages/returning-response-body-in-middleware]

The documentation could also be updated in the clerk docs to support the changes to Next Js middleware in general, which now requires middleware to be at the root of the application.

Storing data without cookies

Review the documentation: https://docs.clerk.dev/
Go through package changelog files.

Description

I am experimenting with using Clerk with an Ionic mobile app. There is no dedicated package for this so I was attempting to use @clerk/clerk-js but it uses cookies to store data.

Question

Is there a way to pass in a different way to store data?

E.g.

import Clerk from "@clerk/clerk-js";

const store = {
  set: (key, value) => {
    // ...some set code
  },
  get: (key) => {
    // ...some get code
  },
};

const clerk = new Clerk('fronted-api', { store });

Having trouble getting clerk to work with `expo`

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

0.9.55

Browser/OS

iOS

Description

Refer to this issue: clerk/clerk-expo-starter#2

UserProfile "hideNavigation" and "only" not working

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

4.1.3

Description

No matter what values are used for UserProfile.hideNavigation or UserProfile.only, the entire user profile component is being rendered. UserProfile.appearance seems to work fine.

import { UserProfile } from '@clerk/nextjs';

export default function AccountSettings() {
  return (
    <UserProfile
      appearance={{
        variables: {
          colorPrimary: '#f00',
        },
      }}
      hideNavigation
      only="security"
    />
  );
}

Export common types from all `/nextjs` packages

Package

Description

As it stands, it's very difficult to get the types for common objects (like clerk, user, and session) out of /nextjs, /nextjs/api, and /nextjs/ssr. In the latter case, it's next to impossible. Here's one example:

import type {useUser} from '@clerk/nextjs';
type UserResource = NonNullable<ReturnType<typeof useUser>['user']>;

I think it would be helpful if all of the common return types were exported, especially since they seem to vary across packages.

Thanks!

[expo] Error and warning in the terminal

Package + Version

Version:

0.9.29

Browser/OS

OS : IOS
Expo : 45.0.5

Description

Hi,
I have got a lot of warning and error messages from clerk in my app.
Looking like this

How I can remove these messages ?

Error JSON not parsing correctly

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

@clerk/clerk-sdk-node

Version:

3.6.16

Browser/OS

Edge 102.0

Description

When using the createUser method, if there is an error, it returns error SyntaxError: Unexpected token o in JSON at position 1, instead of the actual error. It appears the issue is likely originating from @clerk/backend-core/dist/cjs/api/utils/ErrorHandler.js, from the JSON.parse method.

Expo Session already exisits

Discussed in #700

^{Originally posted by Flowko January 22, 2023}
i cant seem to find a solution to this issue, so i have an expo app that i managed to set some of the main functionalities (sign-in/sign-up) with no issues, and i also have a next instance running, but when i send a reset password ( in this case an email_link email ) to the user from my expo app, to be able to reset his password, it loads fine in the next app and creates the session, but in my expo app, if i try to login i get Session already exists, which its correct since the session is already created through next, but is there a way to bypass this ?

( note: when the user requests a reset password email, i redirect them to the login screen, since the email will open the link in my next app, this is another issue, my initial idea was to keep it in my expo app to let the user reset their password from it, but i couldn't get it to work, reading this https://clerk.dev/docs/authentication/forgot-password confuses me a bit, cus it was sending two emails, if you can help me with that as well that would be great, like what kinda of code would be used in both reset password and forgot password screens)

Thanks

User.getUserOauthAccessToken has the wrong return type

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
~~Provide the Frontend API key from your application dashboard.~~ not applicable

Package + Version

Version:

2.9.1

Browser/OS

Not applicable

Description

It seems like the method getUserOauthAccessToken in the class UserAPI has the wrong return type: https://github.com/clerkinc/javascript/blob/250a47daf561928e7d09b48873b19be4de28a581/packages/backend-core/src/api/endpoints/UserApi.ts#L120
The method returns the return value from this.APIClient.request<User>, which makes the return type Promise<User>, and this doesn't seem correct given the name of the function, the backend API docs and the return data from the API.
The User type doesn't match the data returned from the method:

https://github.com/clerkinc/javascript/blob/250a47daf561928e7d09b48873b19be4de28a581/packages/backend-core/src/api/resources/User.ts#L7

From the method body it seems like it calls the /v1/users/:id/oauth_access_tokens/:provider endpoint of the backend API, which does makes sense.
However, in the backend documentation the data from this endpoint is an array of objects with the "object" property having the value "oauth_access_token", which obviously doesn't matches the User type:

https://reference.clerk.dev/reference/backend-api-reference/users#retrieve-the-oauth-access-token-of-a-user

Here's the example return value:

[
  {
    "object": "oauth_access_token",
    "provider": "oauth_google",
    "token": "xxxxxxxxxxxxxxxxxxxxx",
    "public_metadata": {},
    "label": "clerk",
    "scopes": [
      "openid",
      "https://www.googleapis.com/auth/userinfo.email"
      "https://www.googleapis.com/auth/userinfo.profile"
    ]
  }
  ...
]

When calling the function, I get a similar JSON object as well:

[
  {
    "object": "oauth_access_token",
    "token": "…",
    "provider": "oauth_notion",
    "public_metadata": {
      "bot_id": "…",
      "workspace_id": "…",
      "workspace_icon": "…",
      "workspace_name": "…"
    },
    "label": "…"
  }
]

I can't find a type in the JS API matching this type, for instance no object with this object type can be found in the ObjectType enum:

https://github.com/clerkinc/javascript/blob/250a47daf561928e7d09b48873b19be4de28a581/packages/backend-core/src/api/resources/JSON.ts#L12

Nor do I find the string oauth_access_token in the entire repo:

https://github.com/clerkinc/javascript/search?q=oauth_access_token

It seems like there's missing an OAuthAccessToken and its companion OAuthAccessTokenJSON type, and the UserAPI.getUserOauthAccessToken method should return Promise<OAuthAccessToken[]> rather than Promise<User>.

Clerk Nextjs Cypress fails. Need help

I am trying to setup Nextjs and Clerk e2e using cypress and I am getting stuck on this [see attachment].

Incorrect Typings for withClerk HOC

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

2.11.5

Browser/OS

Browser: Chrome (Latest as of 2022-03-01)
OS: Docker (Debian 11.2) via MacOS 12.0.1 Arm64

Description

I have the following code in my Nextjs application

function Wrapper({ children, clerk }: WithClerkProp<WrapperProps>) {
  console.log(clerk.isReady())
}

On page load, the following error is thrown

Wrapper.tsx?b427:63 Uncaught TypeError: clerk.isReady is not a function
    at eval (Wrapper.tsx?b427:63:15)
    at mountMemo (react-dom.development.js?2155:15846:1)
    at Object.useMemo (react-dom.development.js?2155:16219:1)
    at useMemo (react.development.js?935f:1532:1)
    at Wrapper (Wrapper.tsx?b427:61:28)
    at renderWithHooks (react-dom.development.js?2155:14985:1)
    at mountIndeterminateComponent (react-dom.development.js?2155:17811:1)
    at beginWork (react-dom.development.js?2155:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?2155:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?2155:3994:1)
    at invokeGuardedCallback (react-dom.development.js?2155:4056:1)
    at beginWork$1 (react-dom.development.js?2155:23964:1)
    at performUnitOfWork (react-dom.development.js?2155:22776:1)
    at workLoopSync (react-dom.development.js?2155:22707:1)
    at renderRootSync (react-dom.development.js?2155:22670:1)
    at performSyncWorkOnRoot (react-dom.development.js?2155:22293:1)
    at eval (react-dom.development.js?2155:11327:1)
    at unstable_runWithPriority (scheduler.development.js?6c61:468:1)
    at runWithPriority$1 (react-dom.development.js?2155:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js?2155:11322:1)
    at flushSyncCallbackQueue (react-dom.development.js?2155:11309:1)
    at scheduleUpdateOnFiber (react-dom.development.js?2155:21893:1)
    at dispatchAction (react-dom.development.js?2155:16139:1)
    at eval (ClerkProvider.js?9b1f:18:1)

The clerk typings via @clerk/nextjs lead me to @clerk/clerk-react/dist/types.d.ts which left WithClerkProp as the following

export declare type WithClerkProp<T> = T & {
    clerk: LoadedClerk;
};

Expanding on LoadedClerk I managed to dig all the way into the definitions of clerk.ts in @clerk/types. Inside that file I found the following

export interface Clerk {
  // Rest of the file cut out to keep this bug ticket small

  /**
   * Returns true if bootstrapping with Clerk.load has completed successfully. Otherwise, returns false.
   */
  isReady: () => boolean;
}

This definition file clearly marks isReady is a function, not undefined like what I'm getting when I console log the clerk prop

Please let me know if you need any other information, and thanks in advance!

Don't work with yarn 3 and pnp

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

4.6.0

Browser/OS

node v18.10.0
yarn v3.2.4

Reproduction steps

yarn create next-app --example with-clerk with-clerk-app
cd with-clerk-app 
yarn set version berry
yarn install
yarn dev

then navigate to http://localhost:3000/sign-up

Description

Getting this error:

error - .yarn/__virtual__/@clerk-nextjs-virtual-8bbeaf6ef2/0/cache/@clerk-nextjs-npm-4.6.0-f374180ed1-6208d8e632.zip/node_modules/@clerk/nextjs/dist/server/types.js:4:0
Module not found: Can't resolve '@clerk/backend-core'

Import trace for requested module:
./.yarn/__virtual__/@clerk-nextjs-virtual-8bbeaf6ef2/0/cache/@clerk-nextjs-npm-4.6.0-f374180ed1-6208d8e632.zip/node_modules/@clerk/nextjs/dist/server/utils/getAuth.js
./.yarn/__virtual__/@clerk-nextjs-virtual-8bbeaf6ef2/0/cache/@clerk-nextjs-npm-4.6.0-f374180ed1-6208d8e632.zip/node_modules/@clerk/nextjs/server.js
./middleware.js

Incorrect type for getUserOauthAccessToken

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

4.5.7

Browser/OS

If applicable e.g. Chrome latest

Description

Describe your issue in detail, a demo repository or a sandbox would be great.

This is an incorrect type:

    getUserOauthAccessToken(userId: string, provider: `oauth_${string}`): Promise<User>;

It actually returns not a User but something like (taken from runtime log):

[
    {
      object: 'oauth_access_token',
      token: 'ghu_REDACTED',
      provider: 'oauth_github',
      public_metadata: {},
      label: null,
      scopes: [Array]
    }
  ]

Casing in NPM @clerk/backend-core is broken, breaking the package on Linux

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
[N/A] Provide the Frontend API key from your application dashboard.

Package + Version

Version:

1.14.1

Description

It would appear that backend-core contains an incorrectly cased import. This completely breaks anything that depends on it on any case-sensitive file system.

When using clerk-sdk-node on Linux, for example, the error:

Error: Cannot find module './ClerkBackendApi'

Is returned. Digging into this further, it seems that the file is named "ClerkBackendAPI.js" in the npm tarball:

tar xvzf backend-core-1.14.1.tgz
...
x package/dist/cjs/api/ClerkBackendAPI.js
x package/dist/mjs/api/ClerkBackendAPI.js
x package/dist/cjs/api/ClerkBackendAPI.d.ts
x package/dist/mjs/api/ClerkBackendAPI.d.ts
...

Now, macos and Windows have default case insensitive filesystems, so the package works fine, which makes this a real surprise when your application suddenly stops working after moving it into a Docker container.

Running the build locally, it seems all the files are properly named:

npm notice 1.7kB   dist/cjs/api/ClerkBackendApi.d.ts                                
npm notice 1.5kB   dist/cjs/api/ClerkBackendApi.d.ts.map                            
npm notice 4.6kB   dist/cjs/api/ClerkBackendApi.js

So I'm not quite sure how they got renamed like that in the NPM tarball.

Why requiring node version >=16.8 ?

Review the documentation: https://docs.clerk.dev/
Go through package changelog files.

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@clerk/[email protected]',
npm WARN EBADENGINE   required: { node: '>=16' },
npm WARN EBADENGINE   current: { node: 'v14.17.2', npm: '8.6.0' }

It is unusual to require such a higher version of nodejs.
Not every user can migrate from nodejs14 to 16 because of many remaining incompatible modules.
Is that possible to loosen this requirement ?

getToken changes after each render

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

^3.2.7

Browser/OS

Chrome latest

Description

We started migrating to v3 and noticed getToken from useAuth function identity is not stable and as a result changes after each re-render.

This causes the the app to go into infinite loop when getToken is used in the dependancy array of something like useEffect.
Usage Snippet:

A workaround is to remove it from the dependancy array, however that does not make eslint happy

It would be ideal if getToken can be made stable as it was in v2.

HTTP 401 when Cypress chromeWebSecurity is set to false

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

^0.1.0-alpha.6

Browser/OS

Chrome latest

Description

I have a Remix application that uses Clerk for authentication alongside Paddle for payments.
Paddle is integrated via an iframe using their JavaScript library.

With Cypress, in order to avoid cross-origin errors when running E2E tests (e.g. to write an E2E test that covers a full payment flow), it is necessary to put the below within cypress.json:

{
  "chromeWebSecurity": false
}

The above is necessary to allow me to access inputs, buttons, etc within the Paddle payment iframe.

The problem is that when I disable chromeWebSecurity, my app becomes unusable because Clerk starts throwing 401 Unauthorized errors. I understand that this is most likely a security feature enabled by Clerk, however it would be good if there was a way to turn this off for Clerk test/sandbox environments to facilitate testing? If it isn't possible or there isn't a workaround, then I'm also happy to take no as an answer as I understand security implications etc.

Thanks

Role of externalId

Review the documentation: https://docs.clerk.dev/
Go through package changelog files.

Hi All,

The context

We have a special case where all our users must be invited to use our app, and we don't want the invitee to go through clerk signup process. In fact, we only use clerk for sign-in through our custom components.

So, to allow them to sign in, we need to add our users in clerk DB only when they accept our invitation, programmatically through our backend (nodejs).

The question

What is the role of and how to use externalId?

We could add it through api:

createUser({
    externalId: '...',
    emailAddress:['[email protected]']
})

i.e.:

type CreateUserParams = {
  externalId?: string;
  emailAddress?: string[];
  phoneNumber?: string[];
  username?: string;
  password?: string;
  firstName?: string;
  lastName?: string;
  skipPasswordChecks?: boolean;
  skipPasswordRequirement?: boolean;
} & UserMetadataParams;

But we could not query with it:

getUser(userId:string) returns a 404 as userId is not externalId
and getUserList(params: UserListParams = {}) or getCount(params: UserListParams = {}) are using UserCountParams which does not contain it.

i.e.:

type UserCountParams = {
  emailAddress?: string[];
  phoneNumber?: string[];
  username?: string[];
  web3Wallet?: string[];
  query?: string;
  userId?: string[];
};

type UserListParams = UserCountParams & {
  limit?: number;
  offset?: number;
  orderBy?: 'created_at' | 'updated_at' | '+created_at' | '+updated_at' | '-created_at' | '-updated_at';
};

So how to use externalId?

If we add it in UserMetadataParams, same thing: how to query it through metadata as metadata are not allowed in UserCountParams

By the way: externalId is not shown in clerk dashboard (user section). I think it should be good to show it there.

Thanks for answering. ;)

Clerk API key not found during initialization of Express Middleware

Package + Version

@clerk/[email protected]

Description

I am trying to setup an Apollo GraphQL server, which uses express as the base layer, and the Clerk Express Middleware ClerkExpressWithAuth.

However, when following the documentation I get the following error:

file:///sandbox/node_modules/@clerk/clerk-sdk-node/dist/chunk-LF24WFXO.mjs:131
      throw Error(SupportMessages.API_KEY_NOT_FOUND);
            ^

Error:
Clerk API key not found during initialization.
Please visit https://github.com/clerkinc/clerk-sdk-node#options--env-vars-available for more information.

I added the CLERK_API_KEY in the .env.local file at the root of the directory, but it does not load it.

Codesandbox

Here is a codesandbox that experiences the same issue: https://codesandbox.io/s/apollo-server-clerk-62f4ie?file=/index.js

I set dummy values for the .env.local variables - but I am getting the same error when adding the correct api keys in my local repository, so I don' think it has any effects on my issue.

(The graphql interface would be accessible when navigating to the /api route. However at the moment the server is crashing, because of the error described above.)

Possible solution:

Allow to set the CLERK_API_KEY manually when initiating the middleware.
The general Clerk class already allows this (https://clerk.dev/docs/reference/node/getting-started#custom-instantiation).

Remix 1.8 seems to break ClerkApp or ClerkCatchBoundary

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard: clerk.correct.lacewing-23.lcl.dev

Package + Version

@clerk/remix: 1.4.1

Description

We have three Remix apps that use the same Clerk app for authentication. All three apps are hosted on the same domain:

app1.domain
app2.domain
app3.domain

We've been developing and deploying just fine until we upgraded to the latest Remix 1.8.1, which has routing changes and changes to how throw responses are handled by CatchBoundary, which is why I suspect the issue is either in ClerkApp or ClerkCatchBoundary.

Right now we just get a 401 and then nothing. The interstitial never loads (which is what's responsible for loading clerk_browser.js if I'm understanding things correctly).

Instead of data.clerkState.__internal_clerk_state, I get a message 🔒 Clerk: This state shouldn't be possible. Please reach out to [email protected] so we can help...

https://github.com/remix-run/remix/releases/tag/remix%401.8.0

Expo Clerk provider crashes instantly

Clerk instantly crashes without error message.
ApiKey: clerk.trusty.dory-86.lcl.dev

externalId is missing in type definitions of getUserList

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard: clerk.learnarena.com

Package + Version

Version:

2.12.1

Browser/OS

Chrome latest

Description

The backend API supports the external_id query parameter on the GET /v1/users endpoint, but it is missing on the type definition of the SDK.

ClerkProvider typescript error

Review the documentation: https://docs.clerk.dev/
Search for existing issues: https://github.com/clerkinc/javascript/issues
Go through package changelog files.
Provide the Frontend API key from your application dashboard.

Package + Version

Version:

3.2.8

Description

ClerkProvider typescript error, I use this package on monorepo sytem by Turborepo
'ClerkProvider' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<ClerkProviderProps, any, any> | null' is not a valid JSX element. Type 'Component<ClerkProviderProps, any, any>' is not assignable to type 'Element | ElementClass | null'. Type 'Component<ClerkProviderProps, any, any>' is not assignable to type 'ElementClass'. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/home/usman/repo/workdii_mono/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'

Organization Settings page title is wrong (localization issue)

Package + Version

@clerk/clerk-react

Version:

4.7.0

Browser/OS

If applicable e.g. Chrome latest

Description

There is the same text on the Members and Settings pages.

Obviously, we can't manage organization members on the Settings page, so I'd expect another text here.

Adapt Remix package to run on Cloudflare Workers

Package

Description

The rootAuthLoader uses http2 which is a node package. Cloudflare Workers does not have access to Node.js packages, just plain javascript. Can this not be changed to fetch?

How to test Clerk from the CLI?

Using Clerk with Express, I can't figure out how to test locally from the CLI.

When I do the following request, it returns an error that it's not a request made from the browser:

http localhost:3000/api "Cookie: __session=ey..."

HTTP/1.1 500 Internal Server Error
Auth-Result: header-missing-non-browser
...

Any possible way to test from CLI/non browser environment?

Bump React to v18 in clerk-js

Currently, clerkjs bundles its own React dependency and uses its own React instance to render the prebuilt components, even if React is already bundled with the user's app. A required step to support true SSR for clerk-js is to make React a peer dependency, instead of a direct one.

However, that'd make clerkjs use the app's React instance, so we need to make sure that our prebuilt components work properly with the latest React release.

As part of this task, we should:

Update clerkjs to use React18
Build clerkjs. If the build fails, document and try to solve any issues.
Document any type-related issues.
Run the test suite. If it fails, document the cause and try to resolve.
Manually go trough all major auth flows we support, spot any issues and document the actions we need to take.

We expect that React's dev mode idempotency check might cause some of our components to break, especially those that rely on useEffects to start the auth flows (eg: calling signUp.create on render etc.). For more context, see:

Please note that this task is not about making clerkjs work inside a React18 app! We've already confirmed that it does work since clerkjs is still using its own React17 instance. The purpose of this task is to help us understand what issues we'd face if we were to drop the direct React dependency.

Making the necessary code changes is not part of this task. Let's create a detailed design doc explaining any issues and possible solutions and then discuss to figure out the next steps :)