SolidJS Auth0 Wrapper

A SolidJS implementation for Auth0 using the package @auth0/auth0-spa-js. This work is based on top of the library created by @rturnq (which hasn't been updated in a few years).

Getting Started

Installation

NPM

npm i @afroze9/solid-auth0

PNPM

pnpm add @afroze9/solid-auth0

Yarn

npm add @afroze9/solid-auth0

Usage

At the root of your app

Note: Please ensure you have an SPA setup in Auth0 to configure the context.

1import { Auth0 } from '@afroze9/solid-auth0';
2
3const App: Component = () => {
4  return (
5    <Auth0
6      domain="_auth0_domain_"
7      clientId="_client_id_"
8      audience="_api_audience_"
9      logoutRedirectUri={`${window.location.origin}/`}
10      loginRedirectUri={`${window.location.origin}/`}
11      scope="_scopes_"
12    >
13      <AppComponent />
14    </Auth0>
15  );
16};

Elsewhere in the app

1import { Auth0State, useAuth0 } from '@afroze9/solid-auth0';
2
3const TopNav: Component = () => {
4  const auth0: Auth0State<User> | undefined = useAuth0();
5
6  return <div>{auth0?.isAuthenticated() ? <div>Logout</div> : <div>Login</div>}</div>;
7};

To secure a route

1import { Protected } from '@afroze9/solid-auth0';
2
3const MyPage: Component = () => {
4  return <div>This is a secure route</div>;
5};
6
7// You can pass any component to onRedirecting
8export default () => {
9  <Protected onRedirecting={<div>Redirecting...</div>}>
10    <MyPage />
11  </Protected>;
12};

Notes

Currently the wrapper only supports a few underlying functions/properties from the original @auth0/auth0-spa-js package. Future plan is to add more functionality.