@clerk/astro's Protect comonent not working with `plan` and `feature`

[azulika]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

none

Publishable key

pk_test_bWFqb3ItYnVsbGRvZy0zNC5jbGVyay5hY2NvdW50cy5kZXYk

Description

Description:

The @clerk/astro's <Protect> component does not appear to be functioning as described in the documentation when utilizing the plan or feature attributes. According to the documentation, these props should allow for conditional rendering of content based on a user's assigned plan or features. However, it seems that the content is not being protected, irrespective of the plan or feature that is specified.

Steps to reproduce:

1. Initialize a new Astro project and integrate the @clerk/astro library.
2. Create a new page and implement the <Protect> component, specifying a plan attribute as shown below:

   ---
   import { Protect } from "@clerk/astro/components";
   ---
   <Protect plan="premium">
    <p>This content should only be visible to users on the premium plan.</p>
   </Protect>

3. Create an additional page, this time utilizing the <Protect> component with a feature attribute:

   ---
   import { Protect } from "@clerk/astro/components";
   ---
   <Protect feature="some-feature">
    <p>This content should only be visible to users with the 'some-feature' feature.</p>
   </Protect>

4. Deploy the application and navigate to the created pages with various users, some with and some without the designated plan and feature.

Expected behavior:

A user who is not subscribed to the "premium" plan should not be able to view the content "This content should only be visible to users on the premium plan.". In the same way, a user who does not have the "some-feature" feature enabled should not be able to see the content "This content should only be visible to users with the 'some-feature' feature.".

Actual behavior:

The content that is enclosed within the <Protect> component is consistently visible, regardless of the user's plan or features. The component is failing to protect the content as anticipated.

Environment

System:
 OS: Windows 11 10.0.26100
 CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900F
 Memory: 17.06 GB / 31.85 GB
 Binaries:
 Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
 npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
 Browsers:
 Edge: Chromium (133.0.3065.59)
 Internet Explorer: 11.0.26100.1882
 npmPackages:
 @astrojs/cloudflare: ^12.1.0 => 12.5.4
 @astrojs/node: ^9.2.2 => 9.2.2
 @auth/core: ^0.37.4 => 0.37.4
 @clerk/astro: ^2.9.1 => 2.9.1
 @cloudflare/workers-types: ^4.20241230.0 => 4.20250614.0
 @fontsource/inter: ^5.1.1 => 5.2.6
 @fontsource/nunito: ^5.2.6 => 5.2.6
 @fontsource/roboto-mono: ^5.1.1 => 5.2.6
 @fontsource/source-sans-pro: ^5.1.0 => 5.2.5
 astro: ^5.1.2 => 5.9.3
 astro-clerk-auth: ^1.0.0 => 1.0.0
 fs-extra: ^11.3.0 => 11.3.0
 remark-breaks: ^4.0.0 => 4.0.0
 sanitize-html: ^2.17.0 => 2.17.0
 wrangler: ^3.99.0 => 3.114.9

[NWylynko]

Same with the has() function,

import { useAuth } from '@clerk/astro/react'

export function BronzeContent() {
 const { isLoaded, has } = useAuth()

 if (!isLoaded) return <div>Loading...</div>

 const hasBronzePlan = has({ plan: 'bronze' })

 if (!hasBronzePlan) return <h1>Only subscribers to the Bronze plan can access this content.</h1>

 return <h1>For Bronze subscribers only</h1>
}

Getting this error

[wobsoriano]

Sorry for the confusion! It looks like this isn't implemented yet in the Astro Protect component. Thanks for bringing this up to us

[wobsoriano]

Hi! Please use this version for now until the next release:

npm i https://pkg.pr.new/@clerk/astro@6188