next13-auth

v0.0.2

Published

a year ago

A complete authentication both on client and server side

Downloads

0High
0Medium
0Low

mdmahikaishar001

next13-auth authentication jwt-token auth nextjs

Next13 Auth

A complete authentication both on client and server side.

Get started

To add Next13 Auth to your project.

pnpm install next13-auth

Setup 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>
  );
}