@aneeshgusain/next-gen-auth

Browser SDK for Next-Gen Auth — an OAuth 2.0 / OpenID Connect provider with PKCE. Handles the entire authorization-code + PKCE flow so consuming apps only ever need to provide a clientId and redirectUri.

Install

npm install @aneeshgusain/next-gen-auth

Vanilla JS / any framework

import { createAuthClient } from "@aneeshgusain/next-gen-auth";

const auth = createAuthClient({
  clientId: "your-client-id",
  redirectUri: window.location.origin,
  provider: "https://next-gen-auth.onrender.com",
});

// on app load
const claims = await auth.handleCallback(); // null if no code in the URL
if (claims) console.log("Signed in as", claims.email);

// trigger login
document.getElementById("login-btn").addEventListener("click", () => auth.login());

// check auth state anywhere
if (auth.isAuthenticated()) {
  console.log(auth.getUser());
}

// sign out
auth.logout();

React

import { useAuth } from "@aneeshgusain/next-gen-auth/react";

function App() {
  const { user, loading, error, login, logout } = useAuth({
    clientId: "your-client-id",
    redirectUri: window.location.origin,
    provider: "https://next-gen-auth.onrender.com",
  });

  if (loading) return <p>Loading…</p>;
  if (error) return <p>Error: {error}</p>;

  if (user) {
    return (
      <div>
        <h1>Welcome, {user.given_name ?? user.sub}</h1>
        <button onClick={logout}>Log out</button>
      </div>
    );
  }

  return <button onClick={login}>Continue with Next-Gen Auth</button>;
}

API

createAuthClient(config)

| Option | Required | Default | Description | | --------------- | -------- | -------------------------- | ---------------------------------------------- | | clientId | yes | — | Client ID from registration | | redirectUri | yes | — | Must exactly match the registered redirect URI | | provider | yes | — | Base URL of your Next-Gen Auth server | | scope | no | "openid profile email" | Space-separated scopes | | storage | no | sessionStorage | Where PKCE/session values are kept |

Returns an object with: login(), handleCallback(), getUser(), getAccessToken(), refreshSession(), isAuthenticated(), logout(), fetchUserInfo().

Refresh tokens

After login, the SDK stores the provider's refresh_token alongside the access token. getAccessToken() and fetchUserInfo() refresh the access token automatically when it is close to expiring (within 60 seconds). You can also call refreshSession() explicitly.

The cached user claims from the initial id_token are kept for the life of the refresh token (up to 7 days), even after the id_token JWT itself expires.

useAuth(config) (from /react subpath)

Same config shape. Returns { user, loading, error, login, logout, refreshSession }.

Security notes

• This client is designed for public clients (SPAs) using PKCE — no client secret is required or supported here.
• Tokens are kept in sessionStorage by default. If your app is vulnerable to XSS, consider a backend-for-frontend (BFF) architecture instead, where token exchange happens server-side and the browser only holds an httpOnly session cookie.

License

MIT