@authaction/web-sdk
v0.1.8
Published
AuthAction OAuth2 client SDK for web — framework agnostic, with React, Angular, Vue, and Next.js bindings
Maintainers
authaction-devReadme
@authaction/web-sdk
Browser-side OAuth2 / PKCE SDK for AuthAction. Framework-agnostic core with first-class wrappers for React, Next.js, Angular, Vue 3, and Vanilla JS.
Installation
npm install @authaction/web-sdkFrameworks
| Import path | Framework |
|---|---|
| @authaction/web-sdk | Vanilla JS / TypeScript |
| @authaction/web-sdk/react | React 17+ |
| @authaction/web-sdk/nextjs | Next.js 14+ (App Router, client-side) |
| @authaction/web-sdk/angular | Angular 17+ |
| @authaction/web-sdk/vue | Vue 3 |
React
// main.tsx
import { AuthActionProvider } from '@authaction/web-sdk/react';
<AuthActionProvider
domain="myapp.eu.authaction.com"
clientId="your-client-id"
redirectUri={`${window.location.origin}/`}
postLogoutRedirectUri={`${window.location.origin}/`}
authorizationParams={{ audience: 'https://api.myapp.com' }}
>
<App />
</AuthActionProvider>// App.tsx
import { useAuthAction, hasAuthParams } from '@authaction/web-sdk/react';
function App() {
const { isLoading, isAuthenticated, user, loginWithRedirect, logout } = useAuthAction();
if (isLoading) return <Spinner />;
if (!isAuthenticated) return <button onClick={() => loginWithRedirect()}>Login</button>;
return (
<div>
<p>Hello {user?.name}</p>
<button onClick={() => logout()}>Logout</button>
</div>
);
}react-oidc-context compatibility
The SDK is a drop-in replacement for react-oidc-context. The following are provided for compatibility:
| react-oidc-context | @authaction/web-sdk/react |
|---|---|
| useAuth() | useAuthAction() |
| auth.signinRedirect() | auth.loginWithRedirect() |
| auth.signoutRedirect() | auth.logout() |
| auth.removeUser() | auth.removeUser() ✓ same |
| auth.user?.access_token | auth.user?.access_token ✓ same |
| auth.user?.profile.* | auth.user?.profile.* ✓ same |
| auth.activeNavigator | auth.activeNavigator ✓ same |
| hasAuthParams() | hasAuthParams() ✓ same |
Next.js (App Router)
// app/layout.tsx
import { AuthActionNextProvider } from '@authaction/web-sdk/nextjs';
export default function RootLayout({ children }) {
return (
<html><body>
<AuthActionNextProvider
domain="myapp.eu.authaction.com"
clientId="your-client-id"
redirectUri="http://localhost:3000/"
>
{children}
</AuthActionNextProvider>
</body></html>
);
}// Any client component
'use client';
import { useAuthAction } from '@authaction/web-sdk/nextjs';
export function Profile() {
const { user, logout } = useAuthAction();
return <button onClick={() => logout()}>{user?.name}</button>;
}For server-side sessions (NextAuth.js pattern) use
@authaction/server-sdk/nextjsinstead.
Angular
// main.ts
import { provideAuthAction } from '@authaction/web-sdk/angular';
bootstrapApplication(AppComponent, {
providers: [
provideAuthAction({
domain: 'myapp.eu.authaction.com',
clientId: 'your-client-id',
redirectUri: 'http://localhost:4200/',
}),
],
});// app.component.ts
import { AuthActionService } from '@authaction/web-sdk/angular';
@Component({ ... })
export class AppComponent {
constructor(public auth: AuthActionService) {}
login() { this.auth.loginWithRedirect(); }
logout() { this.auth.logout(); }
}<ng-container *ngIf="auth.isAuthenticated$ | async">
Welcome {{ (auth.user$ | async)?.name }}
</ng-container>Route guard
// app.routes.ts
{ path: 'dashboard', canActivate: [authActionGuard], component: DashboardComponent }Vue 3
// main.ts
import { createApp } from 'vue';
import { createAuthAction } from '@authaction/web-sdk/vue';
const app = createApp(App);
app.use(createAuthAction({
domain: 'myapp.eu.authaction.com',
clientId: 'your-client-id',
redirectUri: 'http://localhost:5173/callback',
}));
app.mount('#app');<script setup lang="ts">
import { useAuthAction } from '@authaction/web-sdk/vue';
const { state, loginWithRedirect, logout } = useAuthAction();
</script>
<template>
<div v-if="state.isAuthenticated">
Hello {{ state.user?.name }}
<button @click="logout()">Logout</button>
</div>
<button v-else @click="loginWithRedirect()">Login</button>
</template>Vanilla JS / TypeScript
import { AuthActionClient } from '@authaction/web-sdk';
const client = new AuthActionClient({
domain: 'myapp.eu.authaction.com',
clientId: 'your-client-id',
redirectUri: 'http://localhost:5173/callback',
});
// Login
await client.loginWithRedirect();
// Handle callback (call on your redirect URI page)
await client.handleRedirectCallback();
// Get access token (auto-refreshes if expired)
const token = await client.getAccessToken();
// Logout
await client.logout({ returnTo: 'http://localhost:5173' });Configuration
| Option | Type | Required | Description |
|---|---|---|---|
| domain | string | ✓ | AuthAction tenant domain |
| clientId | string | ✓ | OAuth2 client ID |
| redirectUri | string | ✓ | Callback URL after login |
| postLogoutRedirectUri | string | | Redirect URL after logout |
| scope | string | | OAuth2 scopes (default: openid profile email) |
| authorizationParams | object | | Extra params forwarded to /authorize (e.g. audience) |
| cacheLocation | memory | localstorage | sessionstorage | | Token storage (default: memory) |
Environment variables
AUTHACTION_DOMAIN=your-tenant.eu.authaction.com
AUTHACTION_CLIENT_ID=your-client-id
AUTHACTION_REDIRECT_URI=http://localhost:3000/
AUTHACTION_AUDIENCE=https://api.your-app.comLicense
MIT