Opening this for comparison and review, NOT READY FOR MERGE

client/package.json

@@ -60,6 +60,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@ampproject/toolbox-cache-url": "^2.9.0",
+    "@atproto/syntax": "^0.3.3",
     "@coralproject/bunyan-prettystream": "^0.1.4",
     "@fluent/bundle": "^0.15.1",
     "@fluent/dom": "^0.7.0",

client/src/core/client/admin/routes/Configure/sections/Auth/AuthConfigContainer.tsx

@@ -50,6 +50,7 @@ const AuthConfigContainer: FunctionComponent<Props> = ({
     const integrations = [
       data.auth.integrations.google,
       data.auth.integrations.facebook,
+      data.auth.integrations.bsky,
       data.auth.integrations.sso,
       data.auth.integrations.local,
       data.auth.integrations.oidc,
@@ -122,6 +123,7 @@ const enhanced = withFragmentContainer<Props>({
   `,
   auth: graphql`
     fragment AuthConfigContainer_auth on Auth {
+      ...BskyConfig_formValues @relay(mask:false)
       ...FacebookConfig_formValues @relay(mask: false)
       ...GoogleConfig_formValues @relay(mask: false)
       ...SSOConfig_formValues @relay(mask: false)
@@ -130,6 +132,7 @@ const enhanced = withFragmentContainer<Props>({
       ...SessionConfig_formValues @relay(mask: false)
 
       ...FacebookConfigContainer_auth
+      ...BskyConfigContainer_auth
       ...GoogleConfigContainer_auth
       ...SSOConfigContainer_auth
       ...OIDCConfigContainer_auth

client/src/core/client/admin/routes/Configure/sections/Auth/AuthIntegrationsConfig.tsx

@@ -3,6 +3,7 @@ import React, { FunctionComponent } from "react";
 import { PropTypesOf } from "coral-framework/types";
 import { HorizontalGutter } from "coral-ui/components/v2";
 
+import BskyConfigContainer from "./BskyConfigContainer";
 import FacebookConfigContainer from "./FacebookConfigContainer";
 import GoogleConfigContainer from "./GoogleConfigContainer";
 import LocalAuthConfigContainer from "./LocalAuthConfigContainer";
@@ -11,7 +12,8 @@ import SSOConfigContainer from "./SSOConfigContainer";
 
 interface Props {
   disabled?: boolean;
-  auth: PropTypesOf<typeof FacebookConfigContainer>["auth"] &
+  auth: PropTypesOf<typeof BskyConfigContainer>["auth"] &
+    PropTypesOf<typeof FacebookConfigContainer>["auth"] &
     PropTypesOf<typeof GoogleConfigContainer>["auth"] &
     PropTypesOf<typeof SSOConfigContainer>["auth"] &
     PropTypesOf<typeof OIDCConfigContainer>["auth"];
@@ -27,6 +29,7 @@ const AuthIntegrationsConfig: FunctionComponent<Props> = ({
     <SSOConfigContainer disabled={disabled} auth={auth} />
     <GoogleConfigContainer disabled={disabled} auth={auth} />
     <FacebookConfigContainer disabled={disabled} auth={auth} />
+    <BskyConfigContainer disabled={disabled} auth={auth} />
   </HorizontalGutter>
 );
 

client/src/core/client/admin/routes/Configure/sections/Auth/BskyConfig.tsx

@@ -0,0 +1,107 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+import { graphql } from "react-relay";
+
+import {
+  Condition,
+  required,
+  validateWhen,
+} from "coral-framework/lib/validation";
+import { FormFieldDescription, TextLink } from "coral-ui/components/v2";
+
+import Header from "../../Header";
+import HorizontalRule from "../../HorizontalRule";
+import ClientIDField from "./ClientIDField";
+import ClientSecretField from "./ClientSecretField";
+import ConfigBoxWithToggleField from "./ConfigBoxWithToggleField";
+import RedirectField from "./RedirectField";
+import RegistrationField from "./RegistrationField";
+import TargetFilterField from "./TargetFilterField";
+
+// eslint-disable-next-line no-unused-expressions
+graphql`
+  fragment BskyConfig_formValues on Auth {
+    integrations {
+      bsky {
+        enabled
+        allowRegistration
+        targetFilter {
+          admin
+          stream
+        }
+        clientID
+        clientSecret
+      }
+    }
+  }
+`;
+
+interface Props {
+  disabled?: boolean;
+  callbackURL: string;
+}
+
+const BskyLink = () => (
+  <TextLink target="_blank">
+    {"https://docs.bsky.app/docs/advanced-guides/oauth-client"}
+  </TextLink>
+);
+
+const isEnabled: Condition = (value, values) =>
+  Boolean(values.auth.integrations.bsky.enabled);
+
+const BskyConfig: FunctionComponent<Props> = ({ disabled, callbackURL }) => (
+  <ConfigBoxWithToggleField
+    data-testid="configure-auth-bsky-container"
+    title={
+      <Localized id="configure-auth-bsky-loginWith">
+        <Header container="h2">Login with Bluesky</Header>
+      </Localized>
+    }
+    name="auth.integrations.bsky.enabled"
+    disabled={disabled}
+  >
+    {(disabledInside) => (
+      <>
+        <Localized
+          id="configure-auth-bsky-toEnableIntegration"
+          elems={{ Link: <BskyLink />, br: <br /> }}
+        >
+          <FormFieldDescription>
+            Client ID is the name that will identify this ATproto oauth client
+            to users. For more information visit:
+            <br />
+            {<BskyLink />}
+          </FormFieldDescription>
+        </Localized>
+        <RedirectField url={callbackURL} />
+        <HorizontalRule />
+        <ClientIDField
+          name="auth.integrations.bsky.clientID"
+          validate={validateWhen(isEnabled, required)}
+          disabled={disabledInside}
+        />
+        <ClientSecretField
+          name="auth.integrations.bsky.clientSecret"
+          validate={validateWhen(isEnabled, required)}
+          disabled={disabledInside}
+        />
+        <TargetFilterField
+          label={
+            <Localized id="configure-auth-bsky-useLoginOn">
+              <span>Use Bluesky login on</span>
+            </Localized>
+          }
+          name="auth.integrations.bsky.targetFilter"
+          disabled={disabledInside}
+        />
+        <RegistrationField
+          name="auth.integrations.bsky.allowRegistration"
+          disabled={disabledInside}
+        />
+      </>
+    )}
+  </ConfigBoxWithToggleField>
+);
+
+export default BskyConfig;

client/src/core/client/admin/routes/Configure/sections/Auth/BskyConfigContainer.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { graphql } from "react-relay";
+
+import { withFragmentContainer } from "coral-framework/lib/relay";
+
+import { BskyConfigContainer_auth as AuthData } from "coral-admin/__generated__/BskyConfigContainer_auth.graphql"
+
+import BskyConfig from "./BskyConfig";
+
+interface Props {
+  auth: AuthData;
+  disabled?: boolean;
+}
+
+const BskyConfigContainer: React.FunctionComponent<Props> = ({
+  disabled,
+  auth,
+}) => {
+  return (
+    <BskyConfig
+      disabled={disabled}
+      callbackURL={auth.integrations.bsky.callbackURL}
+    />
+  );
+};
+
+const enhanced = withFragmentContainer<Props>({
+  auth: graphql`
+    fragment BskyConfigContainer_auth on Auth {
+      integrations {
+        bsky {
+          callbackURL
+        }
+      }
+    }
+  `,
+})(BskyConfigContainer);
+
+export default enhanced;

client/src/core/client/admin/routes/Login/views/SignIn/SignIn.tsx

@@ -6,6 +6,7 @@ import { PropTypesOf } from "coral-framework/types";
 import { CallOut, HorizontalGutter } from "coral-ui/components/v2";
 
 import OrSeparator from "./OrSeparator";
+import SignInWithBskyContainer from "./SignInWithBskyContainer";
 import SignInWithEmailContainer from "./SignInWithEmailContainer";
 import SignInWithFacebookContainer from "./SignInWithFacebookContainer";
 import SignInWithGoogleContainer from "./SignInWithGoogleContainer";
@@ -17,24 +18,27 @@ import styles from "./SignIn.css";
 interface Props {
   error: string | null;
   emailEnabled?: boolean;
+  bskyEnabled?: boolean;
   facebookEnabled?: boolean;
   googleEnabled?: boolean;
   oidcEnabled?: boolean;
   auth: PropTypesOf<typeof SignInWithOIDCContainer>["auth"] &
+    PropTypesOf<typeof SignInWithBskyContainer>["auth"] &
     PropTypesOf<typeof SignInWithFacebookContainer>["auth"] &
     PropTypesOf<typeof SignInWithGoogleContainer>["auth"];
 }
 
 const SignIn: FunctionComponent<Props> = ({
   emailEnabled,
+  bskyEnabled,
   facebookEnabled,
   googleEnabled,
   oidcEnabled,
   auth,
   error,
 }) => {
   const oneClickIntegrationEnabled =
-    facebookEnabled || googleEnabled || oidcEnabled;
+    bskyEnabled || facebookEnabled || googleEnabled || oidcEnabled;
   return (
     <>
       <AuthBox
@@ -60,6 +64,11 @@ const SignIn: FunctionComponent<Props> = ({
           )}
           {oneClickIntegrationEnabled && (
             <HorizontalGutter>
+              {bskyEnabled && (
+                <div className={styles.loginButton}>
+                  <SignInWithBskyContainer auth={auth} />
+                </div>
+              )}
               {facebookEnabled && (
                 <div className={styles.loginButton}>
                   <SignInWithFacebookContainer auth={auth} />

client/src/core/client/admin/routes/Login/views/SignIn/SignInContainer.tsx

@@ -38,6 +38,10 @@ const SignInContainer: FunctionComponent<Props> = ({ auth }) => {
       emailEnabled={
         integrations.local.enabled && integrations.local.targetFilter.admin
       }
+      bskyEnabled={
+        integrations.bsky.enabled &&
+        integrations.bsky.targetFilter.admin
+      }
       facebookEnabled={
         integrations.facebook.enabled &&
         integrations.facebook.targetFilter.admin
@@ -58,13 +62,20 @@ const enhanced = withFragmentContainer<Props>({
       ...SignInWithOIDCContainer_auth
       ...SignInWithGoogleContainer_auth
       ...SignInWithFacebookContainer_auth
+      ...SignInWithBskyContainer_auth
       integrations {
         local {
           enabled
           targetFilter {
             admin
           }
         }
+        bsky {
+          enabled
+          targetFilter {
+            admin
+          }
+        }
         facebook {
           enabled
           targetFilter {

client/src/core/client/admin/routes/Login/views/SignIn/SignInWithBskyContainer.tsx

@@ -0,0 +1,60 @@
+import { isValidHandle } from "@atproto/syntax";
+import { SignInWithBskyContainer_auth as AuthData } from "coral-admin/__generated__/SignInWithBskyContainer_auth.graphql";
+import { REDIRECT_TO_PARAM } from "coral-common/common/lib/constants";
+import SignInWithBskyForm, {
+  SignInWithBsky,
+} from "coral-framework/components/BskyLoginForm";
+import { useCoralContext } from "coral-framework/lib/bootstrap";
+import { withFragmentContainer } from "coral-framework/lib/relay";
+import { BskyHandleInput, postBskyApiAuth } from "coral-framework/rest";
+import { FORM_ERROR } from "final-form";
+import qs from "querystringify";
+import React, { FormEvent, FunctionComponent, useCallback } from "react";
+import { graphql } from "react-relay";
+
+interface Props {
+  auth: AuthData;
+}
+
+const SignInWithBskyContainer: FunctionComponent<Props> = ({ auth }) => {
+  const { window } = useCoralContext();
+  // grab user origin so we can send back when done with auth
+  const redirectTo = window.location.pathname;
+  // get /api/auth/bsky route for tenant's bsky integration
+  const authPath = `${auth.integrations.bsky.authURL}?${qs.stringify({
+    [REDIRECT_TO_PARAM]: redirectTo,
+  })}`;
+  const onSubmit: SignInWithBsky["onSubmit"] = useCallback(
+    async (input, form) => {
+      try {
+        // catch invalid handle early before redirecting to /api/auth/bsky
+        const handle = input.handle;
+        const validHandle = isValidHandle(handle as string);
+        if (validHandle) {
+          await postBskyApiAuth(input as BskyHandleInput, authPath);
+          return;
+        } else {
+          return { [FORM_ERROR]: "Invalid handle" };
+        }
+      } catch (error) {
+        return { [FORM_ERROR]: error.message };
+      }
+    },
+    [authPath]
+  );
+  return <SignInWithBskyForm onSubmit={onSubmit} />;
+};
+
+const enhanced = withFragmentContainer<Props>({
+  auth: graphql`
+    fragment SignInWithBskyContainer_auth on Auth {
+      integrations {
+        bsky {
+          authURL
+        }
+      }
+    }
+  `,
+})(SignInWithBskyContainer);
+
+export default enhanced;