@runonatlas/next
is our Next.js library for Atlas, which provides all the components, hooks and backend resources you need.
Create the Atlas Provider
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:Create the Atlas API routes
src/app/api/atlas-api/[slug]/route.ts
file.@runonatlas/next/client
.
PricingComponent
widget shows the plans in your Atlas pricing model and allows users to purhcase a subscription to a plan via Atlas’ in-line checkout.
IMPORTANT: The 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.
atlasServerClient
that we created before to check if a user has access to a feature.
For example, if you are using Clerk:
atlasServerClient
and provide callbacks per each limit that you might want to use.
For example, given a feature whose id is data-explorer
, you can provide a callback to check if the limit has been reached:
data-explorer
feature is available, Atlas will use the callback to compute it.
What happens if you don't configure a limit?
<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: