The Warrant React library provides components, hooks, and helper methods for controlling access to pages and components in Qwik using Warrant. The library interacts directly with the Warrant API using short-lived session tokens that must be created server-side using your API key. Refer to this guide to see how to generate session tokens for your users.
Use npm to install the core Warrant client module @warrantdev/warrant-js. This module includes methods shared across our client libraries (Vue, Angular, etc.) and additional types (for TypeScript users).
npm install @warrantdev/warrant-jsUse npm to install qwik-warrant-js`:
npm install qwik-warrant-jsWrap your application with WarrantProvider, passing it your Client Key using the clientKey prop. WarrantProvider uses Qwik Context to allow you to access utility methods for performing access checks anywhere in your app.
// root.jsx
import {
useContextProvider,
} from '@builder.io/qwik';
import Warrant from "@warrantdev/warrant-js";
import { WarrantContext } from "qwik-warrant-js";
// A valid session token is required to initialize the Client
const warrant = new Warrant({
clientKey: "client_test_f5dsKVeYnVSLHGje44zAygqgqXiLJBICbFzCiAg1E=",
sessionToken: "sess_test_f9asdfASD90mkj2jXZIaeoqbIUAIjsJAHSAnsndW=",
});
export default component$(() => {
useContextProvider(WarrantContext, warrant);
return (
<QwikCityProvider>
<head>
<meta charSet="utf-8" />
<link rel="manifest" href="/manifest.json" />
<RouterHead />
<ServiceWorkerRegister />
</head>
<body lang="en">
<RouterOutlet />
</body>
</QwikCityProvider>
);
});We’ve used a random Client Key in these code examples. Be sure to replace it with your actual Client Key to test this code through your own Warrant account.
For more information on how to use the Warrant API, please refer to the Warrant API reference.
This package includes TypeScript declarations for Warrant.
Note that we may release new minor and patch versions of
qwik-warrant-js with small but backwards-incompatible fixes to the type
declarations. These changes will not affect Warrant itself.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent