0.2.0 • Published 1 year ago
@afroze9/solid-auth0 v0.2.0
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.
import { Auth0 } from '@afroze9/solid-auth0';
const App: Component = () => {
return (
<Auth0
domain="_auth0_domain_"
clientId="_client_id_"
audience="_api_audience_"
logoutRedirectUri={`${window.location.origin}/`}
loginRedirectUri={`${window.location.origin}/`}
scope="_scopes_"
>
<AppComponent />
</Auth0>
);
};
Elsewhere in the app
import { Auth0State, useAuth0 } from '@afroze9/solid-auth0';
const TopNav: Component = () => {
const auth0: Auth0State<User> | undefined = useAuth0();
return <div>{auth0?.isAuthenticated() ? <div>Logout</div> : <div>Login</div>}</div>;
};
To secure a route
import { Protected } from '@afroze9/solid-auth0';
const MyPage: Component = () => {
return <div>This is a secure route</div>;
};
// You can pass any component to onRedirecting
export default () => {
<Protected onRedirecting={<div>Redirecting...</div>}>
<MyPage />
</Protected>;
};
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.