2.0.6 • Published 11 months ago
next-auth-static v2.0.6
Next Auth Static
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
Features
- 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.
Installation
npm install next-auth-staticUsage
In 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);
}API
useAuth()
Returns an object with the following methods and properties:
signIn(accessToken: string, options?: SignInOptions): Promise
Signs in a user.
accessToken: The user's access tokenoptions: Optional object containing additional sign-in datauser: Object containing user data
signOut(): Promise
Signs out the current user.
currentSession: { user?: User } | null
The current user session, if any.
License
MIT
2.0.6
11 months ago
2.0.4
11 months ago
2.0.1
11 months ago
2.0.0
11 months ago
1.0.15
11 months ago
1.0.14
11 months ago
1.0.13
11 months ago
1.0.12
11 months ago
1.0.11
11 months ago
1.0.10
11 months ago
1.0.9
11 months ago
1.0.8
11 months ago
1.0.7
11 months ago
1.0.6
11 months ago
1.0.5
11 months ago
1.0.4
11 months ago
1.0.3
11 months ago
1.0.2
11 months ago
1.0.1
11 months ago
1.0.0
11 months ago