import { ReactElement, useState } from "react"; import { observer } from "mobx-react-lite"; import Link from "next/link"; import useSWR from "swr"; // layouts import { Loader, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui"; import { PageHead } from "@/components/core"; import { InstanceGithubConfigForm, InstanceGoogleConfigForm } from "@/components/instance"; import { useApplication } from "@/hooks/store"; import { InstanceAdminLayout } from "@/layouts/admin-layout"; // types import { NextPageWithLayout } from "@/lib/types"; // hooks // ui // components const InstanceAdminAuthorizationPage: NextPageWithLayout = observer(() => { // store const { instance: { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations }, } = useApplication(); useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations()); // state const [isSubmitting, setIsSubmitting] = useState(false); const enableSignup = formattedConfig?.ENABLE_SIGNUP ?? "0"; const enableMagicLogin = formattedConfig?.ENABLE_MAGIC_LINK_LOGIN ?? "0"; // const enableEmailPassword = formattedConfig?.ENABLE_EMAIL_PASSWORD ?? "0"; const updateConfig = async ( key: "ENABLE_SIGNUP" | "ENABLE_MAGIC_LINK_LOGIN" | "ENABLE_EMAIL_PASSWORD", value: string ) => { setIsSubmitting(true); const payload = { [key]: value, }; await updateInstanceConfigurations(payload) .then(() => { setToast({ title: "Success", type: TOAST_TYPE.SUCCESS, message: "SSO and OAuth Settings updated successfully", }); setIsSubmitting(false); }) .catch((err) => { console.error(err); setToast({ title: "Error", type: TOAST_TYPE.ERROR, message: "Failed to update SSO and OAuth Settings", }); setIsSubmitting(false); }); }; return ( <>
Single sign-on and OAuth
Make your teams life easy by letting them sign-up with their Google and GitHub accounts, and below are the settings.
{formattedConfig ? ( <>
Turn Magic Links {Boolean(parseInt(enableMagicLogin)) ? "off" : "on"}

Slack-like emails for authentication.

You need to have set up email{" "} here {" "} to enable this.
{ Boolean(parseInt(enableMagicLogin)) === true ? updateConfig("ENABLE_MAGIC_LINK_LOGIN", "0") : updateConfig("ENABLE_MAGIC_LINK_LOGIN", "1"); }} size="sm" disabled={isSubmitting} />
Let your users log in via the methods below
Toggling this off will disable all previous configs. Users will only be able to login with an e-mail and password combo.
{ Boolean(parseInt(enableSignup)) === true ? updateConfig("ENABLE_SIGNUP", "0") : updateConfig("ENABLE_SIGNUP", "1"); }} size="sm" disabled={isSubmitting} />
{/*
Turn Email Password {Boolean(parseInt(enableEmailPassword)) ? "off" : "on"}
UX Copy Required!
{ Boolean(parseInt(enableEmailPassword)) === true ? updateConfig("ENABLE_EMAIL_PASSWORD", "0") : updateConfig("ENABLE_EMAIL_PASSWORD", "1"); }} size="sm" disabled={isSubmitting} />
*/}
Google
Github
) : (
)}
); }); InstanceAdminAuthorizationPage.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default InstanceAdminAuthorizationPage;