@skavl-media/subrite-auth
v1.0.1
Published
Authentication package for Subrite
Downloads
121
Readme
@skavl-media/subrite-auth
A l library for integrating authentication with subrite and next.js applications.
Installation
npm install @skavl-media/subrite-authPeer Dependencies
This package requires the following peer dependencies:
npm install next@^15.0.0 [email protected] react@^19Usage
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
Login and logout url.
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>
);
}