feat: add playground

.gitignore

@@ -2,4 +2,4 @@ node_modules
 dist
 .DS_Store
 coverage
-playground
+playground/.next

playground/.env.local

@@ -0,0 +1,6 @@
+KINDE_CLIENT_ID=<your_kinde_client_id>
+KINDE_CLIENT_SECRET=<your_kinde_client_secret>
+KINDE_ISSUER_URL=https://<your_kinde_subdomain>.kinde.com
+KINDE_SITE_URL=http://localhost:3000
+KINDE_POST_LOGOUT_REDIRECT_URL=http://localhost:3000
+KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

playground/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

playground/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;

playground/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "kinde-nextjs-app-router-starter-kit",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@kinde-oss/kinde-auth-nextjs": "latest",
+    "@types/node": "latest",
+    "eslint-config-next": "latest",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest"
+  }
+}

playground/src/app/api/auth/[...kindeAuth]/route.ts

@@ -0,0 +1,3 @@
+import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server";
+
+export const GET = handleAuth();

playground/src/app/api/protected/route.ts

@@ -0,0 +1,16 @@
+import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const { getUser, isAuthenticated } = getKindeServerSession();
+
+  if (!(await isAuthenticated())) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const user = await getUser();
+  const data = { message: "Hello User", id: user?.given_name };
+
+  return NextResponse.json({ data });
+}
+

playground/src/app/api/public/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const data = { message: "Hello world" };
+
+  return NextResponse.json({ data });
+}

playground/src/app/dashboard/page.tsx

@@ -0,0 +1,17 @@
+export default function Dashboard() {
+  return (
+    <div className="container">
+      <div className="card start-hero">
+        <p className="text-body-2 start-hero-intro">Woohoo!</p>
+        <p className="text-display-2">
+          Your authentication is all sorted.
+          <br />
+          Build the important stuff.
+        </p>
+      </div>
+      <section className="next-steps-section">
+        <h2 className="text-heading-1">Next steps for you</h2>
+      </section>
+    </div>
+  );
+}

playground/src/app/globals.css

@@ -0,0 +1,226 @@
+:root {
+  --g-color-black: #000;
+  --g-color-white: #fff;
+
+  --g-color-grey-100: #f1f2f4;
+  --g-color-grey-600: #5d636f;
+  --g-color-grey-700: #434851;
+  --g-color-grey-900: #121417;
+
+  --g-box-shadow: 0px 6px 12px rgba(18, 20, 23, 0.06),
+    0px 15px 24px rgba(18, 20, 23, 0.07), 0px -4px 12px rgba(18, 20, 23, 0.05);
+
+  --g-font-family: "Helvetica";
+
+  --g-font-size-x-small: 0.75rem; /* 12px */
+  --g-font-size-small: 0.875rem; /* 14px */
+  --g-font-size-base: 1rem; /* 16px */
+  --g-font-size-large: 1.25rem; /* 20x */
+  --g-font-size-x-large: 1.5rem; /* 24px */
+  --g-font-size-2x-large: 2rem; /* 32px */
+  --g-font-size-3x-large: 2.5rem; /* 40px */
+  --g-font-size-4x-large: 4rem; /* 64px */
+
+  --g-font-weight-base: 400;
+  --g-font-weight-semi-bold: 500;
+  --g-font-weight-bold: 600;
+  --g-font-weight-black: 700;
+
+  --g-border-radius-small: 0.5rem;
+  --g-border-radius-base: 1rem;
+  --g-border-radius-large: 1.5rem;
+
+  --g-spacing-small: 0.5rem; /* 8px */
+  --g-spacing-base: 1rem; /* 16px */
+  --g-spacing-large: 1.5rem; /* 24px */
+  --g-spacing-x-large: 2rem; /* 32px */
+  --g-spacing-2x-large: 2.5rem; /* 40px */
+  --g-spacing-3x-large: 3rem; /* 48px */
+  --g-spacing-6x-large: 6rem; /* 96px */
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: var(--g-font-family);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.text-subtle {
+  color: var(--g-color-grey-600);
+  font-size: var(--g-font-size-x-small);
+  font-weight: var(--g-font-weight-base);
+}
+
+.text-body-1 {
+  font-size: var(--g-font-size-2x-large);
+  font-weight: var(--g-font-weight-base);
+}
+
+.text-body-2 {
+  font-size: var(--g-font-size-x-large);
+  font-weight: var(--g-font-weight-base);
+}
+
+.text-body-3 {
+  color: var(--g-color-grey-900);
+  font-size: var(--g-font-size-small);
+  font-weight: var(--g-font-weight-base);
+}
+
+.text-display-1 {
+  font-size: var(--g-font-size-4x-large);
+  font-weight: var(--g-font-weight-black);
+  line-height: 1.2;
+}
+
+.text-display-2 {
+  font-size: var(--g-font-size-3x-large);
+  font-weight: var(--g-font-weight-black);
+  line-height: 1.4;
+}
+
+.text-display-3 {
+  font-size: var(--g-font-size-x-large);
+  font-weight: var(--g-font-weight-black);
+}
+
+.text-heading-1 {
+  font-size: var(--g-font-size-large);
+  font-weight: var(--g-font-weight-semi-bold);
+}
+
+.text-heading-2 {
+  font-size: var(--g-font-size-base);
+  font-weight: var(--g-font-weight-semi-bold);
+}
+
+.container {
+  padding: 0 var(--g-spacing-6x-large);
+  margin: auto;
+}
+
+.nav {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: var(--g-spacing-x-large);
+  padding-top: var(--g-spacing-x-large);
+  width: 100%;
+}
+
+.sign-in-btn {
+  margin-right: var(--g-spacing-small);
+}
+
+.btn {
+  border-radius: var(--g-border-radius-small);
+  display: inline-block;
+  font-weight: var(--g-font-weight-bold);
+  padding: var(--g-spacing-base);
+}
+
+.btn-ghost {
+  color: var(--g-color-grey-700);
+}
+
+.btn-dark {
+  background-color: var(--g-color-black);
+  color: var(--g-color-white);
+}
+
+.btn-light {
+  background: var(--g-color-white);
+  color: var(--g-color-black);
+  font-weight: 600;
+}
+
+.btn-big {
+  font-size: var(--g-font-size-large);
+  padding: var(--g-font-size-large) var(--g-font-size-x-large);
+}
+
+.hero {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 45rem;
+  justify-content: center;
+  text-align: center;
+}
+
+.hero-title {
+  margin-bottom: var(--g-spacing-x-large);
+}
+
+.hero-tagline {
+  margin-bottom: var(--g-spacing-3x-large);
+}
+
+.card {
+  background: var(--g-color-black);
+  border-radius: var(--g-border-radius-large);
+  box-shadow: var(--g-box-shadow);
+  color: var(--g-color-white);
+}
+
+.link {
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+}
+
+.link:hover {
+  background: #f1f2f4;
+}
+
+.footer {
+  padding-bottom: var(--g-spacing-x-large);
+  padding-top: var(--g-spacing-x-large);
+}
+
+.footer-tagline {
+  margin-bottom: var(--g-font-size-x-small);
+  margin-top: var(--g-font-size-x-small);
+}
+
+.start-hero {
+  padding: var(--g-spacing-2x-large);
+  text-align: center;
+}
+
+.start-hero-intro {
+  margin-bottom: var(--g-spacing-base);
+}
+
+.avatar {
+  align-items: center;
+  background-color: var(--g-color-grey-100);
+  border-radius: var(--g-border-radius-large);
+  display: flex;
+  height: var(--g-spacing-3x-large);
+  justify-content: center;
+  text-align: center;
+  width: var(--g-spacing-3x-large);
+}
+
+.profile-blob {
+  align-items: center;
+  display: grid;
+  gap: var(--g-spacing-base);
+  grid-template-columns: auto 1fr;
+}
+
+.next-steps-section {
+  margin-top: var(--g-spacing-2x-large);
+}

playground/src/app/layout.tsx

@@ -0,0 +1,82 @@
+import "./globals.css";
+import {
+  RegisterLink,
+  LoginLink,
+  LogoutLink,
+} from "@kinde-oss/kinde-auth-nextjs/components";
+import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
+import Link from "next/link";
+
+export const metadata = {
+  title: "Kinde Auth",
+  description: "Kinde with NextJS App Router",
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { isAuthenticated, getUser } = getKindeServerSession();
+  const user = await getUser();
+  return (
+    <html lang="en">
+      <body>
+        <header>
+          <nav className="nav container">
+            <h1 className="text-display-3">KindeAuth</h1>
+            <div>
+              {!(await isAuthenticated()) ? (
+                <>
+                  <LoginLink className="btn btn-ghost sign-in-btn">
+                    Sign in
+                  </LoginLink>
+                  <RegisterLink className="btn btn-dark">Sign up</RegisterLink>
+                </>
+              ) : (
+                <div className="profile-blob">
+                  {user?.picture ? (
+                    <img
+                      className="avatar"
+                      src={user?.picture}
+                      alt="user profile avatar"
+                      referrerPolicy="no-referrer"
+                    />
+                  ) : (
+                    <div className="avatar">
+                      {user?.given_name?.[0]}
+                      {user?.family_name?.[0]}
+                    </div>
+                  )}
+                  <div>
+                    <p className="text-heading-2">
+                      {user?.given_name} {user?.family_name}
+                    </p>
+
+                    <LogoutLink className="text-subtle">Log out</LogoutLink>
+                  </div>
+                </div>
+              )}
+            </div>
+          </nav>
+        </header>
+        <main>{children}</main>
+        <footer className="footer">
+          <div className="container">
+            <strong className="text-heading-2">KindeAuth</strong>
+            <p className="footer-tagline text-body-3">
+              Visit our{" "}
+              <Link className="link" href="https://kinde.com/docs">
+                help center
+              </Link>
+            </p>
+
+            <small className="text-subtle">
+              © 2023 KindeAuth, Inc. All rights reserved
+            </small>
+          </div>
+        </footer>
+      </body>
+    </html>
+  );
+}