@grantry/vue

Experimental. The API below may change between 0.x releases. This package ships the session state and the calls as composables; it has no prebuilt components — <SignIn>, <UserProfile>, <PricingTable> and the rest are @grantry/react's. A Vue application signs in through the hosted page (client.signInWithRedirect()) or builds its own forms.

Authentication, accounts and billing state for Vue 3, on top of @grantry/js.

Install

npm install @grantry/vue

Vue ^3.4 is a peer dependency. @grantry/js comes with it.

Set up

// src/main.ts
import { createApp } from 'vue';
import { createGrantry } from '@grantry/vue';
import App from './App.vue';

createApp(App)
  .use(createGrantry({ publishableKey: import.meta.env.VITE_GRANTRY_PUBLISHABLE_KEY }))
  .mount('#app');

The publishable key (pk_test_… or pk_live_…) is in the Grantry dashboard under API keys. Never pass a secret key (sk_…): the client refuses one.

Route options — signInUrl, signUpUrl, the sign-in and sign-up fallback and force redirect URLs, and afterSignOutUrl — can be passed to createGrantry() or set as VITE_GRANTRY_* variables; what the code passes wins.

Use

<script setup lang="ts">
import { useAuth, useGrantry, useUser } from '@grantry/vue';

const { client } = useGrantry();
const { isLoaded, isSignedIn, signOut } = useAuth();
const { user } = useUser();
</script>

<template>
  <p v-if="!isLoaded">Loading…</p>
  <button v-else-if="!isSignedIn" @click="client.signInWithRedirect()">Sign in</button>
  <p v-else>Signed in as {{ user?.email }} <button @click="signOut()">Sign out</button></p>
</template>

isLoaded is false until the session has been read. user is null both while loading and when nobody is signed in, so check isLoaded before drawing a sign-in screen.

| Composable | What it gives you | | --- | --- | | useGrantry() | The instance: client (the full @grantry/js client), signIn, signUp, signOut, getToken, reload. Throws if the plugin is not installed. | | useAuth() | isLoaded, isSignedIn, userId, signOut(), getToken() | | useUser() | isLoaded, user, reload() | | useEntitlements() | plan, plans, features, has({ plan, feature }), hasFeature() — read from the access token | | useEnvironment() | The application's configuration as the server describes it | | useRoutes() | Where sign-in and sign-up are, and where a finished flow goes | | usePlans() | The public plans, priced and ready to draw |

Selling

const { client } = useGrantry();
await client.redirectToCheckout({ items: [{ priceId: 'price_…' }] });

The browser leaves for Grantry's hosted checkout on your application's checkout domain and comes back to successUrl (this page when left out) once it is paid. client.createCheckout() makes the page without leaving, and client.redirectToPaymentMethodUpdate() replaces the card a plan renews with.

Calling your own backend

const { getToken } = useAuth();
const token = await getToken(); // null when signed out
await fetch('/api/things', { headers: { Authorization: `Bearer ${token}` } });

Verify the token on your server. Entitlements in the browser are for drawing the right screen, never for deciding access.

Things to know

• No background refresh. The plugin fetches an access token when the session is read, at sign-in, and when getToken() finds none fresh. Call reload() after anything that changes the session or the plan — a second factor answered with client.verifyMfa(), a purchase — to read the user and a fresh token.
• A correct password is not always a session. signIn() returns the whole result: mfa means a second factor is owed, status: 'password_update_required' means the password must be replaced first. Neither signs anybody in.
• getToken() answers null when nobody is signed in or the token could not be fetched. A refused token (the session was revoked or signed out elsewhere) signs the page out; a network failure leaves the state as it was.
• signOut() leaves every account in the browser and goes to afterSignOutUrl if one is set. signOut({ sessionId }) leaves one account and reads which one is active now.

Licence

MIT