Feat/custom providers (#133)

* feat: custom providers * feat: conditional providers & design upgrade * fix: eslint shit
polyfact · Feb 23, 2024 · c3c279b · c3c279b
1 parent 57e7f82
commit c3c279b
Show file tree

Hide file tree

Showing 3 changed files with 192 additions and 548 deletions.
diff --git a/lib/components/Login.tsx b/lib/components/Login.tsx
@@ -1,161 +1,33 @@
 "use client";
-
+import {
+    GoogleLoginButton,
+    MicrosoftLoginButton,
+    GithubLoginButton,
+} from "react-social-login-buttons";
 import React, { ReactNode } from "react";
 import { usePolyfire } from "../hooks";
 import "./Login.css";
 
-function GithubButton() {
-    const {
-        auth: { login },
-    } = usePolyfire();
-
-    return (
-        <button
-            onClick={() => login("github")}
-            style={{
-                fontWeight: "bold",
-                backgroundColor: "black",
-                color: "white",
-                padding: 10,
-                display: "block",
-                marginBottom: 10,
-                boxShadow: "2px 2px 8px #bbb",
-                width: "100%",
-            }}
-        >
-            <svg
-                aria-hidden="true"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                width="20"
-                height="20"
-                style={{
-                    display: "inline-block",
-                    verticalAlign: "sub",
-                    marginRight: 10,
-                }}
-            >
-                <path
-                    fill-rule="evenodd"
-                    d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
-                    clip-rule="evenodd"
-                ></path>
-            </svg>
-            Sign in with GitHub
-        </button>
-    );
-}
-
-function MicrosoftButton() {
-    const {
-        auth: { login },
-    } = usePolyfire();
-
-    return (
-        <button
-            onClick={() => login("azure")}
-            style={{
-                fontWeight: "bold",
-                backgroundColor: "white",
-                color: "black",
-                padding: 10,
-                display: "block",
-                marginBottom: 10,
-                boxShadow: "2px 2px 8px #bbb",
-                width: "100%",
-            }}
-        >
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 23 23"
-                height="20"
-                width="20"
-                style={{
-                    display: "inline-block",
-                    verticalAlign: "sub",
-                    marginRight: 10,
-                }}
-            >
-                <path fill="#f3f3f3" d="M0 0h23v23H0z" />
-                <path fill="#f35325" d="M1 1h10v10H1z" />
-                <path fill="#81bc06" d="M12 1h10v10H12z" />
-                <path fill="#05a6f0" d="M1 12h10v10H1z" />
-                <path fill="#ffba08" d="M12 12h10v10H12z" />
-            </svg>
-            Sign in with Microsoft
-        </button>
-    );
-}
-
-function GoogleButton() {
-    const {
-        auth: { login },
-    } = usePolyfire();
-
-    return (
-        <button
-            onClick={() => login("google")}
-            style={{
-                fontWeight: "bold",
-                backgroundColor: "white",
-                color: "black",
-                padding: 10,
-                display: "block",
-                marginBottom: 10,
-                boxShadow: "2px 2px 8px #bbb",
-                width: "100%",
-            }}
-        >
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                height="20"
-                viewBox="0 0 24 24"
-                width="20"
-                style={{
-                    display: "inline-block",
-                    verticalAlign: "sub",
-                    marginRight: 10,
-                }}
-            >
-                <path
-                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-                    fill="#4285F4"
-                />
-                <path
-                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                    fill="#34A853"
-                />
-                <path
-                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-                    fill="#FBBC05"
-                />
-                <path
-                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                    fill="#EA4335"
-                />
-                <path d="M1 1h22v22H1z" fill="none" />
-            </svg>
-            Sign in with Google
-        </button>
-    );
-}
-
 export interface LoginProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     termsOfService?: string;
     privacyPolicy?: string;
+    providers?: string[];
 }
 
 export function Login({
     children,
     termsOfService,
     privacyPolicy,
+    providers,
     ...props
 }: LoginProps): React.ReactElement {
     const {
-        auth: { status },
+        auth: { status, login },
     } = usePolyfire();
 
+    if (!providers) providers = ["github", "google", "azure"];
+
     if (status === "loading") {
         return (
             <div
@@ -179,9 +51,18 @@ export function Login({
     if (status === "unauthenticated") {
         return (
             <div {...props} style={{ width: 240, minHeight: 145, ...(props.style || {}) }}>
-                <GithubButton />
-                <GoogleButton />
-                <MicrosoftButton />
+                {providers.map((p) => {
+                    switch (p) {
+                        case "github":
+                            return <GithubLoginButton onClick={() => login("github")} />;
+                        case "google":
+                            return <GoogleLoginButton onClick={() => login("google")} />;
+                        case "azure":
+                            return <MicrosoftLoginButton onClick={() => login("azure")} />;
+                        default:
+                            return null;
+                    }
+                })}
                 {(termsOfService || privacyPolicy) && (
                     <p style={{ fontSize: 11, textAlign: "center" }}>
                         By continuing, you are indicating that you accept

diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
         "polyfact-io-ts": "^2.2.20",
         "process": "^0.11.10",
         "react": "^18.2.0",
+        "react-social-login-buttons": "^3.9.1",
         "readable-stream": "^4.4.2",
         "uuid": "^9.0.0",
         "ws": "^8.13.0"