Commit 697cc198 authored by Grant's avatar Grant
Browse files

Merge branch 'dev-bypass-auth' into 'main' 

Allow for bypassing auth while in development mode

See merge request !102
parents dc2764d8 22bc86ad

doc/development/authentication.md

0 → 100644
+19 −0
Original line number Diff line number Diff line 
---

title: Authentication

---



# Authentication Modes



## NORMAL (default)



Requires [sc07/fediverse-auth](https://sc07.dev/sc07/fediverse-auth) to be running and details to be filled in the environment variables (`AUTH_ENDPOINT`, `AUTH_CLIENT`, `AUTH_SECRET`)



## INHIBIT



Completely disables logging in



## TRUST (development)



`NODE_ENV` needs to be `development`



Replaces the login process with a form taking a username & instance hostname to assume instead
 
 No newline at end of file

packages/client/src/components/LoginModal/Inhibit.tsx

0 → 100644
+5 −0
Original line number Diff line number Diff line 
import { Alert } from "@nextui-org/react";



export const Inhibit = () => {

  return <Alert color="danger">Logging in is disabled</Alert>;

};

packages/client/src/components/LoginModal/LoginModal.tsx

0 → 100644
+27 −0
Original line number Diff line number Diff line 
import { Modal, ModalBody, ModalContent, ModalHeader } from "@nextui-org/react";

import { Inhibit } from "./Inhibit";

import { Trust } from "./Trust";



export const LoginModal = ({

  mode,

  onClose,

}: {

  mode?: string;

  onClose: () => any;

}) => {

  return (

    <Modal isOpen={Boolean(mode)} onOpenChange={onClose}>

      <ModalContent>

        {(_onClose) => (

          <>

            <ModalHeader>Login</ModalHeader>

            <ModalBody>

              {mode === "INHIBIT" && <Inhibit />}

              {mode === "TRUST" && <Trust />}

            </ModalBody>

          </>

        )}

      </ModalContent>

    </Modal>

  );

};

packages/client/src/components/LoginModal/Trust.tsx

0 → 100644
+24 −0
Original line number Diff line number Diff line 
import { Alert, Button, Input } from "@nextui-org/react";



export const Trust = () => {

  return (

    <>

      <Alert color="primary">DEVELOPMENT: Trust auth mode</Alert>

      <form method="GET" action="/api/callback">

        <Input

          label="Username"

          type="text"

          placeholder="grant"

          name="username"

        />

        <Input

          label="Hostname / Instance"

          type="text"

          placeholder="toast.ooo"

          name="instance"

        />

        <Button type="submit">Login</Button>

      </form>

    </>

  );

};

packages/client/src/components/Toolbar/Palette.tsx

+81 −54
Original line number Diff line number Diff line 
import { useEffect } from "react";

import { useCallback, useEffect, useState } from "react";

import { useAppContext } from "../../contexts/AppContext";

import { Canvas } from "../../lib/canvas";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faXmark } from "@fortawesome/free-solid-svg-icons";

import { KeybindManager } from "../../lib/keybinds";

import { Button, Link } from "@nextui-org/react";

import { Button } from "@nextui-org/react";

import { LoginModal } from "../LoginModal/LoginModal";

import { toast } from "react-toastify";



export const Palette = () => {

  const { config, user, cursor, setCursor } = useAppContext<true>();

  const [mode, setMode] = useState<string>();



  useEffect(() => {

    Canvas.instance?.updateCursor(cursor.color);
@@ -28,7 +31,27 @@ export const Palette = () => { 
    };

  }, []);



  const handleLogin = useCallback(() => {

    fetch("/api/login", {

      redirect: "manual",

    }).then(async (res) => {

      const location = res.headers.get("location");

      if (location) {

        window.location.href = location;

      } else {

        const data = await res.json();

        if ("error" in data) {

          toast.error("Error while logging in: " + data.error);

        }

        if ("mode" in data) {

          setMode(data.mode);

        }

      }

    });

  }, []);



  return (

    <>

      <div id="pallete" className="bg-[#fff] dark:bg-[#000]">

        <div className="pallete-colors">

          <button
@@ -47,7 +70,10 @@ export const Palette = () => { 
            <button

              key={color.id}

              aria-label={color.name}

            className={["pallete-color", color.id === cursor.color && "active"]

              className={[

                "pallete-color",

                color.id === cursor.color && "active",

              ]

                .filter((a) => a)

                .join(" ")}

              style={{
@@ -74,10 +100,9 @@ export const Palette = () => { 
              <div className="flex gap-3 items-center">

                You are not logged in

                <Button

                as={Link}

                href="/api/login"

                  className="user-login"

                  variant="faded"

                  onPress={handleLogin}

                >

                  Login

                </Button>
@@ -86,5 +111,7 @@ export const Palette = () => { 
          </div>

        )}

      </div>

      <LoginModal mode={mode} onClose={() => setMode(undefined)} />

    </>

  );

};