Next.js Static Auth is a comprehensive TypeScript library for managing authentication and authorization in Next.js static exported projects
- can be used on the client side, anywhere
- User Authentication: Implement secure user sign-in and sign-out functionality.
- Token Management: Securely handle JWT tokens for authentication.
- Session Handling: Manage user sessions
- Static Site Integration: Seamlessly works with Next.js static site generation.
- Disable Devtools Hook:A simple hook for disabling DevTools in the application.
npm install next-auth-staticIn layout.tsx
"use client";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { AuthConfig, AuthProvider } from "next-auth-static";
import AuthProviderComponent from "./authProvider";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode,
}>) {
const authConfig: AuthConfig = {
tokenType: "Bearer",
tokenExpiry: 30,
tokenExpiryUnit: "seconds",
tokenKeys: {
accessToken: "access_token",
},
};
return (
<html lang="en">
<body className={inter.className}>
<AuthProvider config={authConfig}>{children}</AuthProvider>;
</body>
</html>
);
}user sign in:
"use client";
import { useAuth } from "next-auth-static";
import React, { useState } from "react";
const LoginPage = () => {
const { signIn } = useAuth();
const handleLogin = async () => {
try {
const response = await fetch("example-login-endpoint", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ username, password }),
});
const data = await response.json();
if (response.ok) {
await signIn({
accessToken: data.token,
user: {
name: "test",
email: "test",
},
});
} else {
alert(`Login failed: ${data.message}`);
}
} catch (error) {
console.error("Login error:", error);
alert("An error occurred while trying to log in.");
}
};
return (
<div>
<h1>Login</h1>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button onClick={handleLogin}>Login</button>
</div>
);
};
export default LoginPage;signout:
const { signOut } = useAuth();
<button onClick={() => signOut().then(() => alert("Logged out"))}>
logout
</button>;get current sessions:
const { currentSession } = useAuth();
const { user = {} } = currentSession || {};
if (user) {
console.log("user", user);
}Returns an object with the following methods and properties:
Signs in a user.
-
accessToken: The user's access token -
options: Optional object containing additional sign-in data-
user: Object containing user data
-
Signs out the current user.
The current user session, if any.
MIT