0.0.5 • Published 4 months ago

celestya v0.0.5

Weekly downloads
-
License
ISC
Repository
-
Last release
4 months ago

celestya

Highly opinionated session management tool for NextJS Frontends

How to use

Add environment vars (dont expose them publically!!)

//.env

CELESTYA_SECRET=XXXXXX      // AT_LEAST_32_CHARACTERS
CELESTYA_COOKIE_NAME=XXXX   // COOKIE_NAME
CELESTYA_SECURE=true        // true / false

Configure the api endpoints

// /src/app/api/[[...endpoint]]

import { API_URL, HOST } from "@/config/env";
import { IConfig, IRequestOptions, Proxy } from "celestya";

const config: IConfig = {
    host: HOST || "missing-host",
    route: "/api",
    apiUrl: API_URL || "missing-api-url",
    userEndpoint: "/user",
};

export const POST = (req: any, opt: IRequestOptions) => Proxy("POST", req, opt, config);
export const GET = (req: any, opt: IRequestOptions) => Proxy("GET", req, opt, config);
export const DELETE = (req: any, opt: IRequestOptions) => Proxy("DELETE", req, opt, config);

Configure the provider

// /src/app/layout.tsx

import { AuthProvider, Logout } from "celestya/client";

export default function RootLayout({
    children,
}: {
    children: React.ReactNode,
}) {
    return (
        <html lang="en">
            <body>
                <AuthProvider>{children}</AuthProvider>
            </body>
        </html>
    );
}

Use the getSession function in server components (keep in mind they dont revalidate often!)

// /src/app/navbar.tsx

import { getSession, /* Session */ } from "celestya";

// Optionally provide a user object
interface User {
    email: string
    name: string
}

const Navbar = async () => {
    // const session: Session<User> = await getSession(); <- optional
    const session = await getSession<User>();

    return <div>Welcome: {session.user?.name}</div>;
};

export default Navbar;

Use the apiFetch function in server components

// /src/app/navbar.tsx

import { apiFetch } from "celestya";
import { config } from "@/app/api/[[...endpoint]]/route"

// Optionally provide a user object
interface User {
    email: string
    name: string
}

const Navbar = async () => {
    const user = await apiFetch("/user", {}, config)

    return <div>Welcome: {session.user?.name}</div>;
};

export default Navbar;

Use the other functions in client components

// /src/app/page.tsx

import { useAuth } from 'celestya/client'

// Optionally provide a user object
interface User {
    email: string
    name: string
}

const Home = async () => {
    const { ready, get } = useAuth()

    const handleClick = () => {
        try {
            if (!ready) throw new Error('Not ready')
            const res = await get('/user/billing')

            console.log(res)
        } catch (e) {
            console.log(e)
        }
    }

    return <Button onClick={handleClick}>Welcome: {session.user?.name}</div>;
};

export default Navbar;

Todo

  • x: Change returns at error
  • x: GET request with auth
  • x: POST request with auth
  • x: Fix issue with getSession serverside and config set at layout (If used at api/_/route.tsx)
  • x: Fix issue with api endpoints if no layout has been loaded (if accessing api directly)
  • : Upload request with worker as helper (?)
  • : Refresh logic
  • : Fix Response types
0.0.5

4 months ago

0.0.4

4 months ago

0.0.3

10 months ago

0.0.2

10 months ago

0.0.1

10 months ago