@mulverse/mulguard-core 1.0.0

package/src/lib/pages/signin.tsx

@@ -0,0 +1,255 @@
+import type {
+  InternalProvider,
+  SignInPageErrorParam,
+  Theme,
+} from "../../types.js"
+import { webauthnScript } from "../utils/webauthn-client.js"
+
+const signinErrors: Record<SignInPageErrorParam | "default", string> = {
+  default: "Unable to sign in.",
+  Signin: "Try signing in with a different account.",
+  OAuthSignin: "Try signing in with a different account.",
+  OAuthCallbackError: "Try signing in with a different account.",
+  OAuthCreateAccount: "Try signing in with a different account.",
+  EmailCreateAccount: "Try signing in with a different account.",
+  Callback: "Try signing in with a different account.",
+  OAuthAccountNotLinked:
+    "To confirm your identity, sign in with the same account you used originally.",
+  EmailSignin: "The e-mail could not be sent.",
+  CredentialsSignin:
+    "Sign in failed. Check the details you provided are correct.",
+  SessionRequired: "Please sign in to access this page.",
+}
+
+function ConditionalUIScript(providerID: string) {
+  const startConditionalUIScript = `
+const currentURL = window.location.href;
+const authURL = currentURL.substring(0, currentURL.lastIndexOf('/'));
+(${webauthnScript})(authURL, "${providerID}");
+`
+  return (
+    <>
+      <script dangerouslySetInnerHTML={{ __html: startConditionalUIScript }} />
+    </>
+  )
+}
+
+export default function SigninPage(props: {
+  csrfToken?: string
+  providers?: InternalProvider[]
+  callbackUrl?: string
+  email?: string
+  error?: SignInPageErrorParam
+  theme?: Theme
+}) {
+  const {
+    csrfToken,
+    providers = [],
+    callbackUrl,
+    theme,
+    email,
+    error: errorType,
+  } = props
+
+  if (typeof document !== "undefined" && theme?.brandColor) {
+    document.documentElement.style.setProperty(
+      "--brand-color",
+      theme.brandColor
+    )
+  }
+
+  if (typeof document !== "undefined" && theme?.buttonText) {
+    document.documentElement.style.setProperty(
+      "--button-text-color",
+      theme.buttonText
+    )
+  }
+
+  const error = errorType && (signinErrors[errorType] ?? signinErrors.default)
+
+  const providerLogoPath = "https://authjs.dev/img/providers"
+
+  const conditionalUIProviderID = providers.find(
+    (provider) => provider.type === "webauthn" && provider.enableConditionalUI
+  )?.id
+
+  return (
+    <div className="signin">
+      {theme?.brandColor && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `:root {--brand-color: ${theme.brandColor}}`,
+          }}
+        />
+      )}
+      {theme?.buttonText && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+        :root {
+          --button-text-color: ${theme.buttonText}
+        }
+      `,
+          }}
+        />
+      )}
+      <div className="card">
+        {error && (
+          <div className="error">
+            <p>{error}</p>
+          </div>
+        )}
+        {theme?.logo && <img src={theme.logo} alt="Logo" className="logo" />}
+        {providers.map((provider, i) => {
+          let bg, brandColor, logo
+          if (provider.type === "oauth" || provider.type === "oidc") {
+            ;({
+              bg = "#fff",
+              brandColor,
+              logo = `${providerLogoPath}/${provider.id}.svg`,
+            } = provider.style ?? {})
+          }
+          const color = brandColor ?? bg ?? "#fff"
+          return (
+            <div key={provider.id} className="provider">
+              {provider.type === "oauth" || provider.type === "oidc" ? (
+                <form action={provider.signinUrl} method="POST">
+                  <input type="hidden" name="csrfToken" value={csrfToken} />
+                  {callbackUrl && (
+                    <input
+                      type="hidden"
+                      name="callbackUrl"
+                      value={callbackUrl}
+                    />
+                  )}
+                  <button
+                    type="submit"
+                    className="button"
+                    style={{
+                      "--provider-brand-color": color,
+                    }}
+                    tabIndex={0}
+                  >
+                    <span
+                      style={{
+                        filter:
+                          "invert(1) grayscale(1) brightness(1.3) contrast(9000)",
+                        "mix-blend-mode": "luminosity",
+                        opacity: 0.95,
+                      }}
+                    >
+                      Sign in with {provider.name}
+                    </span>
+                    {logo && <img loading="lazy" height={24} src={logo} />}
+                  </button>
+                </form>
+              ) : null}
+              {(provider.type === "email" ||
+                provider.type === "credentials" ||
+                provider.type === "webauthn") &&
+                i > 0 &&
+                providers[i - 1].type !== "email" &&
+                providers[i - 1].type !== "credentials" &&
+                providers[i - 1].type !== "webauthn" && <hr />}
+              {provider.type === "email" && (
+                <form action={provider.signinUrl} method="POST">
+                  <input type="hidden" name="csrfToken" value={csrfToken} />
+                  <label
+                    className="section-header"
+                    htmlFor={`input-email-for-${provider.id}-provider`}
+                  >
+                    Email
+                  </label>
+                  <input
+                    id={`input-email-for-${provider.id}-provider`}
+                    autoFocus
+                    type="email"
+                    name="email"
+                    value={email}
+                    placeholder="email@example.com"
+                    required
+                  />
+                  <button id="submitButton" type="submit" tabIndex={0}>
+                    Sign in with {provider.name}
+                  </button>
+                </form>
+              )}
+              {provider.type === "credentials" && (
+                <form action={provider.callbackUrl} method="POST">
+                  <input type="hidden" name="csrfToken" value={csrfToken} />
+                  {Object.keys(provider.credentials).map((credential) => {
+                    return (
+                      <div key={`input-group-${provider.id}`}>
+                        <label
+                          className="section-header"
+                          htmlFor={`input-${credential}-for-${provider.id}-provider`}
+                        >
+                          {provider.credentials[credential].label ?? credential}
+                        </label>
+                        <input
+                          name={credential}
+                          id={`input-${credential}-for-${provider.id}-provider`}
+                          type={provider.credentials[credential].type ?? "text"}
+                          placeholder={
+                            provider.credentials[credential].placeholder ?? ""
+                          }
+                          {...provider.credentials[credential]}
+                        />
+                      </div>
+                    )
+                  })}
+                  <button id="submitButton" type="submit" tabIndex={0}>
+                    Sign in with {provider.name}
+                  </button>
+                </form>
+              )}
+              {provider.type === "webauthn" && (
+                <form
+                  action={provider.callbackUrl}
+                  method="POST"
+                  id={`${provider.id}-form`}
+                >
+                  <input type="hidden" name="csrfToken" value={csrfToken} />
+                  {Object.keys(provider.formFields).map((field) => {
+                    return (
+                      <div key={`input-group-${provider.id}`}>
+                        <label
+                          className="section-header"
+                          htmlFor={`input-${field}-for-${provider.id}-provider`}
+                        >
+                          {provider.formFields[field].label ?? field}
+                        </label>
+                        <input
+                          name={field}
+                          data-form-field
+                          id={`input-${field}-for-${provider.id}-provider`}
+                          type={provider.formFields[field].type ?? "text"}
+                          placeholder={
+                            provider.formFields[field].placeholder ?? ""
+                          }
+                          {...provider.formFields[field]}
+                        />
+                      </div>
+                    )
+                  })}
+                  <button
+                    id={`submitButton-${provider.id}`}
+                    type="submit"
+                    tabIndex={0}
+                  >
+                    Sign in with {provider.name}
+                  </button>
+                </form>
+              )}
+              {(provider.type === "email" ||
+                provider.type === "credentials" ||
+                provider.type === "webauthn") &&
+                i + 1 < providers.length && <hr />}
+            </div>
+          )
+        })}
+      </div>
+      {conditionalUIProviderID && ConditionalUIScript(conditionalUIProviderID)}
+    </div>
+  )
+}

package/src/lib/pages/signout.tsx

@@ -0,0 +1,49 @@
+import type { Theme } from "../../types.js"
+
+export interface SignoutProps {
+  url?: URL
+  csrfToken?: string
+  theme?: Theme
+}
+
+export default function SignoutPage(props: SignoutProps) {
+  const { url, csrfToken, theme } = props
+
+  return (
+    <div className="signout">
+      {theme?.brandColor && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+        :root {
+          --brand-color: ${theme.brandColor}
+        }
+      `,
+          }}
+        />
+      )}
+      {theme?.buttonText && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `
+        :root {
+          --button-text-color: ${theme.buttonText}
+        }
+      `,
+          }}
+        />
+      )}
+      <div className="card">
+        {theme?.logo && <img src={theme.logo} alt="Logo" className="logo" />}
+        <h1>Signout</h1>
+        <p>Are you sure you want to sign out?</p>
+        <form action={url?.toString()} method="POST">
+          <input type="hidden" name="csrfToken" value={csrfToken} />
+          <button id="submitButton" type="submit">
+            Sign out
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}

package/src/lib/pages/styles.css

@@ -0,0 +1,377 @@
+:root {
+  --border-width: 1px;
+  --border-radius: 0.5rem;
+  --color-error: #c94b4b;
+  --color-info: #157efb;
+  --color-info-hover: #0f6ddb;
+  --color-info-text: #fff;
+}
+
+.__next-auth-theme-auto,
+.__next-auth-theme-light {
+  --color-background: #ececec;
+  --color-background-hover: rgba(236, 236, 236, 0.8);
+  --color-background-card: #fff;
+  --color-text: #000;
+  --color-primary: #444;
+  --color-control-border: #bbb;
+  --color-button-active-background: #f9f9f9;
+  --color-button-active-border: #aaa;
+  --color-separator: #ccc;
+  --provider-bg: #fff;
+  --provider-bg-hover: color-mix(
+    in srgb,
+    var(--provider-brand-color) 30%,
+    #fff
+  );
+}
+
+.__next-auth-theme-dark {
+  --color-background: #161b22;
+  --color-background-hover: rgba(22, 27, 34, 0.8);
+  --color-background-card: #0d1117;
+  --color-text: #fff;
+  --color-primary: #ccc;
+  --color-control-border: #555;
+  --color-button-active-background: #060606;
+  --color-button-active-border: #666;
+  --color-separator: #444;
+  --provider-bg: #161b22;
+  --provider-bg-hover: color-mix(
+    in srgb,
+    var(--provider-brand-color) 30%,
+    #000
+  );
+  img[src$="42-school.svg"],
+  img[src$="apple.svg"],
+  img[src$="boxyhq-saml.svg"],
+  img[src$="eveonline.svg"],
+  img[src$="github.svg"],
+  img[src$="mailchimp.svg"],
+  img[src$="medium.svg"],
+  img[src$="okta.svg"],
+  img[src$="patreon.svg"],
+  img[src$="ping-id.svg"],
+  img[src$="roblox.svg"],
+  img[src$="threads.svg"],
+  img[src$="wikimedia.svg"] {
+    filter: invert(1);
+  }
+  #submitButton {
+    background-color: var(--provider-bg, var(--color-info));
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .__next-auth-theme-auto {
+    --color-background: #161b22;
+    --color-background-hover: rgba(22, 27, 34, 0.8);
+    --color-background-card: #0d1117;
+    --color-text: #fff;
+    --color-primary: #ccc;
+    --color-control-border: #555;
+    --color-button-active-background: #060606;
+    --color-button-active-border: #666;
+    --color-separator: #444;
+    --provider-bg: #161b22;
+    --provider-bg-hover: color-mix(
+      in srgb,
+      var(--provider-brand-color) 30%,
+      #000
+    );
+    img[src$="42-school.svg"],
+    img[src$="apple.svg"],
+    img[src$="boxyhq-saml.svg"],
+    img[src$="eveonline.svg"],
+    img[src$="github.svg"],
+    img[src$="mailchimp.svg"],
+    img[src$="medium.svg"],
+    img[src$="okta.svg"],
+    img[src$="patreon.svg"],
+    img[src$="ping-id.svg"],
+    img[src$="roblox.svg"],
+    img[src$="threads.svg"],
+    img[src$="wikimedia.svg"] {
+      filter: invert(1);
+    }
+    #submitButton {
+      background-color: var(--provider-bg, var(--color-info));
+    }
+  }
+}
+
+html {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
+  box-sizing: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--color-background);
+  margin: 0;
+  padding: 0;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+}
+
+h1 {
+  margin-bottom: 1.5rem;
+  padding: 0 1rem;
+  font-weight: 400;
+  color: var(--color-text);
+}
+
+p {
+  margin-bottom: 1.5rem;
+  padding: 0 1rem;
+  color: var(--color-text);
+}
+
+form {
+  margin: 0;
+  padding: 0;
+}
+
+label {
+  font-weight: 500;
+  text-align: left;
+  margin-bottom: 0.25rem;
+  display: block;
+  color: var(--color-text);
+}
+
+input[type] {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  border: var(--border-width) solid var(--color-control-border);
+  background: var(--color-background-card);
+  font-size: 1rem;
+  border-radius: var(--border-radius);
+  color: var(--color-text);
+}
+
+p {
+  font-size: 1.1rem;
+  line-height: 2rem;
+}
+
+a.button {
+  text-decoration: none;
+  line-height: 1rem;
+
+  &:link,
+  &:visited {
+    background-color: var(--color-background);
+    color: var(--color-primary);
+  }
+}
+
+button,
+a.button {
+  padding: 0.75rem 1rem;
+  color: var(--provider-color, var(--color-primary));
+  background-color: var(--provider-bg, var(--color-background));
+  border: 1px solid #00000031;
+  font-size: 0.9rem;
+  height: 50px;
+  border-radius: var(--border-radius);
+  transition: background-color 250ms ease-in-out;
+  font-weight: 300;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: var(--provider-bg-hover, var(--color-background-hover));
+    cursor: pointer;
+  }
+
+  &:active {
+    cursor: pointer;
+  }
+
+  span {
+    color: var(--provider-bg);
+  }
+}
+
+#submitButton {
+  color: var(--button-text-color, var(--color-info-text));
+  background-color: var(--brand-color, var(--color-info));
+  width: 100%;
+
+  &:hover {
+    background-color: var(
+      --button-hover-bg,
+      var(--color-info-hover)
+    ) !important;
+  }
+}
+
+a.site {
+  color: var(--color-primary);
+  text-decoration: none;
+  font-size: 1rem;
+  line-height: 2rem;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.page {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+
+  > div {
+    text-align: center;
+  }
+}
+
+.error {
+  a.button {
+    padding-left: 2rem;
+    padding-right: 2rem;
+    margin-top: 0.5rem;
+  }
+
+  .message {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.signin {
+  input[type="text"] {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+
+  hr {
+    display: block;
+    border: 0;
+    border-top: 1px solid var(--color-separator);
+    margin: 2rem auto 1rem auto;
+    overflow: visible;
+
+    &::before {
+      content: "or";
+      background: var(--color-background-card);
+      color: #888;
+      padding: 0 0.4rem;
+      position: relative;
+      top: -0.7rem;
+    }
+  }
+
+  .error {
+    background: #f5f5f5;
+    font-weight: 500;
+    border-radius: 0.3rem;
+    background: var(--color-error);
+
+    p {
+      text-align: left;
+      padding: 0.5rem 1rem;
+      font-size: 0.9rem;
+      line-height: 1.2rem;
+      color: var(--color-info-text);
+    }
+  }
+
+  > div,
+  form {
+    display: block;
+
+    input[type] {
+      margin-bottom: 0.5rem;
+    }
+
+    button {
+      width: 100%;
+    }
+  }
+
+  .provider + .provider {
+    margin-top: 1rem;
+  }
+}
+
+.logo {
+  display: inline-block;
+  max-width: 150px;
+  margin: 1.25rem 0;
+  max-height: 70px;
+}
+
+.card {
+  background-color: var(--color-background-card);
+  border-radius: 1rem;
+  padding: 1.25rem 2rem;
+
+  .header {
+    color: var(--color-primary);
+  }
+
+  input[type]::placeholder {
+    color: color-mix(
+      in srgb,
+      var(--color-text) 20%,
+      var(--color-button-active-background)
+    );
+  }
+
+  input[type] {
+    background: color-mix(in srgb, var(--color-background-card) 95%, black);
+  }
+}
+
+.section-header {
+  color: var(--color-text);
+}
+
+@media screen and (min-width: 450px) {
+  .card {
+    margin: 2rem 0;
+    width: 368px;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  .card {
+    margin: 1rem 0;
+    width: 343px;
+  }
+}