@runonatlas/react
is our React library for Atlas, which provides all the components and hooks you need.
getAuth
: A function that returns the authentication token. This is only necessary if the authentication with the backend is done with tokens and headers (for example, Clerk).loginCallback
: A function that is called whenever the user tries to do an action that requires authentication.userId
: The ID of the user.userEmail
: The email of the user. Optional.userName
: The name of the user. Optional.isUserLoading
: A boolean that indicates whether the user is still loading. Optional. Helps Atlas to avoid flickering when the user status changes.AtlasProvider
, wherever you have the rest of your providers and under your authentication provider.
For example, with Clerk:
Using a different host for your backend?
@runonatlas/react
.
successUrl
must be absolute. For example, /success
is not valid, but https://your-app.com/success
is valid.
iFrame
. When a visitor selects a plan, they’ll be redirected to your core application where the SDK is installed to sign in and complete the purchase.
To embed pricing on a website outside your app, use the /pricing-embed
endpoint and pass the following URL query parameters:
publishableKey
- public key with read access to your pricing model (accessible in settings/api-keys)redirectTo
- absolute URL to redirect users to your app when they select a plansuccessUrl
- absolute URL to return users to after they succesfully purchase a planredirectTo
andsuccessUrl
must be absolute. For example, /success
is not valid, but https://your-app.com/success
is valid.
successUrl
must be absolute. For example, /success
is not valid, but https://your-app.com/success
is valid.
useFeaturesAllowed
hook to check if a user has access to a feature.
useCustomerFeatures
hook to get a users access status for all features in your pricing model:
FeatureProtect
component to check if a user has access to a feature.
<FeatureProtect>
component and the useFeaturesAllowed()
hook, it will automatically check if the user has access to the features you are protecting AND if the limit has not been reached.
However, it is possible that you want to show your user why the access was denied! To to do this, we give you the reasons why the access was denied. For example, with the hook useFeaturesAllowed
:
<FeatureProtect>
component, instead of directly providing the FallbackComponent, you can actually provide a function that returns the component to be rendered when the access is denied. For example: