0.0.2 • Published 2 years ago
next13-auth v0.0.2
Next13 Auth
A complete authentication both on client and server side.
Get started
To add Next13 Auth to your project.
pnpm install next13-authSetup Your Project
Configure Backend
At the very beginning, create a backend server. Add a endpoint, that will return our authenticated user based on accessToken. On this path /auth/user.
export interface IUser {
id: string | number;
name: string;
img: string;
[key: string]: any;
}
axios.get<any, AxiosResponse<{ user: IUser }>>(
"https://my-server.com/auth/user", {
headers: { Authorization: `Bearer ${token}` },
}
);Add Envs
On your next13-app add this line of code NEXT_PUBLIC_AUTH_URL={AUTHENTICATED_USER_ENDPOIN} in .env.local
Add Auth State
// app/layout.tsx
import { ReactNode } from "react";
import { useAuthSSR } from "next13-auth";
import { AuthProvider } from "next13-auth/client";
export default async function RootLayout({
children,
}: {
children: ReactNode;
}) {
const auth = await useAuthSSR();
return (
<html lang="en">
<head />
<body>
<AuthProvider auth={auth}>{children}</AuthProvider>
</body>
</html>
);
}Examples
Authentication On Server Side
import { authOnSSR } from "next13-auth";
export default async function ProfilePage() {
await authOnSSR();
return <main>Profile</main>;
}Authentication On Client Side
For using next13-auth in client side use useAuth();
"use client";
import { useAuth } from "next13-auth/client";
export default function HomePage() {
const auth = useAuth();
return (
<main>
<h1>Home</h1>
<h3>{auth.user?.name}</h3>
<span>{auth.status}</span>
</main>
);
}Login On Client Side
"use client";
import { useAuth } from "next13-auth/cleint";
import axios from "axios";
export default function LoginPage() {
const auth = useAuth();
const login = async () => {
try {
const response = await axios.post("/api/auth/login", {});
await auth.login(response.data.accessToken);
} catch (error) {
console.log(error);
}
};
return (
<main>
<button onClick={login}>Login</button>
</main>
);
}Logout On Server Side
import { logoutOnSSR } from "next13-auth";
export default async function LogoutPage() {
await logoutOnSSR();
return <main>Logout</main>;
}Logout On Client Side
"use client";
import { useAuth } from "next13-auth/cleint";
export default function LogoutPage() {
const auth = useAuth();
const logout = () => {
auth.logout();
};
return (
<main>
<button onClick={logout}>Logout</button>
</main>
);
}