@skavl-media/subrite-auth NPM

@skavl-media/subrite-auth

A l library for integrating authentication with subrite and next.js applications.

Installation

npm install @skavl-media/subrite-auth

Peer Dependencies

This package requires the following peer dependencies:

npm install next@^15.0.0 next-auth@4.24.11 react@^19

Usage

Initialize Environment Variables

First, set up the required environment variables in your .env file:

NEXT_PUBLIC_SUBRITE_URL="https://minside.your-subrite-url.com"
NEXT_PUBLIC_SUBRITE_CLIENT_ID="your-subrite-client-id"
SUBRITE_CLIENT_SECRET="your-subrite-client-secret"
SUBRITE_API_URL="https://api.subrite.no"
NEXT_PUBLIC_NEXTAUTH_URL="http://localhost:3010" # Your Next.js application URL
NEXTAUTH_SECRET="your-nextauth-secret"

Mandatory Configuration

in your app/api/auth/[...nextauth]/route.ts file:

import NextAuth, { NextAuthOptions } from 'next-auth';
import { getAuthConfig } from '@skavl-media/subrite-auth';

const handler = NextAuth(getAuthConfig() as NextAuthOptions);

export { handler as GET, handler as POST };

in your app/layout.tsx

import { getServerAuth } from '@skavl-media/subrite-auth';
import { SessionContextProviders } from '@skavl-media/subrite-auth/components';

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const { session } = await getServerAuth();
  return (
    <html lang="en">
      <head>
        <link rel="icon" href="/images/favicon.ico" type="image/png" />
      </head>
      <body>
        <SessionContextProviders session={session}>{children}</SessionContextProviders>
      </body>
    </html>
  );
}

You'll need a page to redirect users for authenticating and redirecting back to your application. Create a new page at app/auth-check/pages.tsx with the following content:

'use client';

import { useAuthCheck } from '@skavl-media/subrite-auth/hooks';

export default function AuthCheck() {
  useAuthCheck();

  return (
    <div>
      <p>Checking authentication...</p>
    </div>
  );
}

You'll need a page for signout callback. Create a new page at app/auth-check/signout/pages.tsx with the following content:

'use client';

import { useSignOut } from '@skavl-media/subrite-auth/hooks';

export default function SignOut() {
  useSignOut();

  return (
    <div className="flex items-center justify-center">
      <h1 className="text-center">Logging out..</h1>
    </div>
  );
}

Helper Hooks

You can get the login and logout url by using the useLoginUrl and useLogOutUrl hooks.

import { useAuth, useLoginUrl, useLogOutUrl } from '@skavl-media/subrite-auth/hooks';

export default function Header() {
  const { isLoggedIn } = useAuth();
  const loginUrl = useLoginUrl();
  const logOutUrl = useLogOutUrl();

  return (
    <header>
      {isLoggedIn ? (
        <>
          <a href={logOutUrl}>Log out</a>
          <a href={process.env.NEXT_PUBLIC_SUBRITE_URL}> My Page</a>
        </>
      ) : (
        <a href={loginUrl}>Log in</a>
      )}
    </header>
  );
}

You can get user authentication information on client side by using the useAuth hook.

'use client';
import { useAuth } from '@skavl-media/subrite-auth/hooks';

export default function Content() {
  const { session, user, hasAccess, isAdmin, isActiveSubscriber, checkPackage, checkProduct } =
    useAuth();

  return (
    <div>
      <div>
        <h1>Welcome {user?.name}</h1>
        <p>Has access: {hasAccess ? 'Yes' : 'No'}</p>
        <p>Is admin: {isAdmin ? 'Yes' : 'No'}</p>
        <p>Is active subscriber: {isActiveSubscriber ? 'Yes' : 'No'}</p>
        <p>Check package: {checkPackage('packageId') ? 'Yes' : 'No'}</p>
        <p>Check product: {checkProduct('productId') ? 'Yes' : 'No'}</p>
        <p> Session: {JSON.stringify(session)}</p>
      </div>
    </div>
  );
}

Adding cta/checkout link search parameter:

import { useCheckoutParams } from '@skavl-media/subrite-auth/hooks';

export function CtaButton({ link }) {
  const subriteParams = useCheckoutParams();
  const linkURL = new URL(link);
  linkURL.search = subriteParams.toString();

  return <a href={linkURL.toString()}>Buy this subscription</a>;
}

Server Side Rendering

You can get user authentication information on server side by using the getServerAuth function.

import { getServerAuth } from '@skavl-media/subrite-auth';

async function ServerContent() {
  const { session, user, hasAccess, isAdmin, isActiveSubscriber, checkPackage, checkProduct } =
    await getServerAuth();

  return (
    <div>
      <div>
        <h1>Welcome {user?.name}</h1>
        <p>Has access: {hasAccess ? 'Yes' : 'No'}</p>
        <p>Is admin: {isAdmin ? 'Yes' : 'No'}</p>
        <p>Is active subscriber: {isActiveSubscriber ? 'Yes' : 'No'}</p>
        <p>Check package: {checkPackage('packageId') ? 'Yes' : 'No'}</p>
        <p>Check product: {checkProduct('productId') ? 'Yes' : 'No'}</p>
        <p> Session: {JSON.stringify(session)}</p>
      </div>
    </div>
  );
}

@subrite/next-auth-provider range_check

2 months ago

2 months ago

4 months ago

4 months ago

4 months ago