Add Eartho Sign In Integration to StackAuth

apps/backend/prisma/migrations/20240910211533_remove_shared_facebook/migration.sql

@@ -38,7 +38,7 @@ WHERE "type" = 'FACEBOOK';
 
 -- AlterEnum
 BEGIN;
-CREATE TYPE "ProxiedOAuthProviderType_new" AS ENUM ('GITHUB', 'GOOGLE', 'MICROSOFT', 'SPOTIFY');
+CREATE TYPE "ProxiedOAuthProviderType_new" AS ENUM ('GITHUB', 'GOOGLE', 'MICROSOFT', 'SPOTIFY', 'EARTHO');
 ALTER TABLE "ProxiedOAuthProviderConfig" ALTER COLUMN "type" TYPE "ProxiedOAuthProviderType_new" USING ("type"::text::"ProxiedOAuthProviderType_new");
 ALTER TYPE "ProxiedOAuthProviderType" RENAME TO "ProxiedOAuthProviderType_old";
 ALTER TYPE "ProxiedOAuthProviderType_new" RENAME TO "ProxiedOAuthProviderType";

apps/backend/prisma/schema.prisma

@@ -466,6 +466,7 @@ enum ProxiedOAuthProviderType {
   GITHUB
   GOOGLE
   MICROSOFT
+  EARTHO
   SPOTIFY
 }
 

apps/backend/prisma/seed.ts

@@ -38,7 +38,7 @@ async function seed() {
             create: {
               allowLocalhost: true,
               oauthProviderConfigs: {
-                create: (['github', 'spotify', 'google', 'microsoft'] as const).map((id) => ({
+                create: (['github', 'spotify', 'google', 'microsoft', 'eartho'] as const).map((id) => ({
                   id,
                   proxiedOAuthConfig: {
                     create: {
@@ -84,7 +84,7 @@ async function seed() {
                   create: {}
                 }
               },
-              ...(['github', 'spotify', 'google', 'microsoft'] as const).map((id) => ({
+              ...(['github', 'spotify', 'google', 'microsoft', 'eartho'] as const).map((id) => ({
                 oauthProviderConfig: {
                   connect: {
                     projectConfigId_id: {

apps/backend/src/oauth/index.tsx

@@ -16,12 +16,14 @@ import { MicrosoftProvider } from "./providers/microsoft";
 import { MockProvider } from "./providers/mock";
 import { SpotifyProvider } from "./providers/spotify";
 import { XProvider } from "./providers/x";
+import { EarthoProvider } from "./providers/eartho";
 
 const _providers = {
   github: GithubProvider,
   google: GoogleProvider,
   facebook: FacebookProvider,
   microsoft: MicrosoftProvider,
+  eartho: EarthoProvider,
   spotify: SpotifyProvider,
   discord: DiscordProvider,
   gitlab: GitlabProvider,

apps/backend/src/oauth/providers/eartho.tsx

@@ -0,0 +1,42 @@
+import { getEnvVariable } from "@stackframe/stack-shared/dist/utils/env";
+import { OAuthUserInfo, validateUserInfo } from "../utils";
+import { OAuthBaseProvider, TokenSet } from "./base";
+
+export class EarthoProvider extends OAuthBaseProvider {
+  private constructor(
+    ...args: ConstructorParameters<typeof OAuthBaseProvider>
+  ) {
+    super(...args);
+  }
+
+  static async create(options: {
+    clientId: string,
+    clientSecret: string,
+  }) {
+    return new EarthoProvider(...await OAuthBaseProvider.createConstructorArgs({
+      issuer: "https://account.eartho.io",
+      discoverFromUrl: "https://account.eartho.io/.well-known/openid-configuration",
+      redirectUri: getEnvVariable("STACK_BASE_URL") + "/api/v1/auth/oauth/callback/eartho",
+      baseScope: "openid profile email",
+      noPKCE: false,
+      openid: true,
+      ...options,
+    }));
+  }
+
+  async postProcessUserInfo(tokenSet: TokenSet): Promise<OAuthUserInfo> {
+    const info = await fetch("https://account.eartho.io/api/oidc/userinfo", {
+      headers: {
+        Authorization: `Bearer ${tokenSet.accessToken}`,
+      },
+    }).then((res) => res.json());
+
+    return validateUserInfo({
+      accountId: info.sub,
+      displayName: info.name,
+      email: info.email,
+      profileImageUrl: info.picture,
+      emailVerified: info.email_verified,
+    });
+  }
+}

apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.tsx

@@ -41,7 +41,7 @@ export default function PageClient () {
       credentialEnabled: form.watch("signInMethods").includes("credential"),
       magicLinkEnabled: form.watch("signInMethods").includes("magicLink"),
       passkeyEnabled: form.watch("signInMethods").includes("passkey"),
-      oauthProviders: form.watch('signInMethods').filter((method) => ["google", "github", "microsoft", "spotify"].includes(method)).map(provider => ({ id: provider, type: 'shared' })),
+      oauthProviders: form.watch('signInMethods').filter((method) => ["google", "github", "microsoft", "eartho"].includes(method)).map(provider => ({ id: provider, type: 'shared' })),
     }
   };
 
@@ -56,7 +56,7 @@ export default function PageClient () {
           credentialEnabled: values.signInMethods.includes("credential"),
           magicLinkEnabled: values.signInMethods.includes("magicLink"),
           passkeyEnabled: values.signInMethods.includes("passkey"),
-          oauthProviders: (["google", "facebook", "github", "microsoft"] as const).map(provider => ({
+          oauthProviders: (["google", "facebook", "github", "microsoft", "eartho"] as const).map(provider => ({
             id: provider,
             enabled: values.signInMethods.includes(provider),
             type: 'shared'
@@ -94,7 +94,7 @@ export default function PageClient () {
                   { value: "google", label: "Google" },
                   { value: "github", label: "GitHub" },
                   { value: "microsoft", label: "Microsoft" },
-                  { value: "spotify", label: "Spotify" },
+                  { value: "eartho", label: "Eartho" },
                 ]}
               />
 

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx

@@ -21,6 +21,7 @@ function toTitle(id: string) {
     google: "Google",
     facebook: "Facebook",
     microsoft: "Microsoft",
+    eartho: "Eartho",
     spotify: "Spotify",
     discord: "Discord",
     gitlab: "GitLab",

apps/oauth-mock-server/src/index.ts

@@ -7,14 +7,15 @@ const mockedProviders = [
   "facebook",
   "google",
   "microsoft",
+  "eartho",
   "spotify",
   "discord",
   "gitlab",
   "bitbucket",
   "x",
 ];
 
-const configuration: Configuration  = {
+const configuration: Configuration = {
   clients: mockedProviders.map((providerId) => ({
     client_id: providerId,
     client_secret: 'MOCK-SERVER-SECRET',

docs/fern/docs/pages/getting-started/production.mdx

@@ -68,6 +68,11 @@ To use your own OAuth provider setups in production, follow these steps for each
        Callback URL:  
        `https://api.stack-auth.com/api/v1/auth/oauth/callback/x`
      </Tab>
+      <Tab title="Eartho">
+       [Eartho OAuth Setup Guide](https://docs.eartho.io)  
+       Callback URL:  
+       `https://api.stack-auth.com/api/v1/auth/oauth/callback/eartho`
+     </Tab>
    </Tabs>
 
 2. **Enter OAuth Credentials**: Go to the `Auth Methods` section in the Stack dashboard, open the provider's settings, switch from shared keys to custom keys, and enter the client ID and client secret.

packages/stack-shared/src/utils/oauth.tsx

@@ -1,6 +1,6 @@
-export const standardProviders = ["google", "github", "microsoft", "spotify", "facebook", "discord", "gitlab", "bitbucket", "linkedin", "apple", "x"] as const;
+export const standardProviders = ["google", "github", "microsoft", "eartho", "spotify", "facebook", "discord", "gitlab", "bitbucket", "linkedin", "apple", "x"] as const;
 // No more shared providers should be added except for special cases
-export const sharedProviders = ["google", "github", "microsoft", "spotify"] as const;
+export const sharedProviders = ["google", "github", "microsoft", "eartho"] as const;
 export const allProviders = standardProviders;
 
 export type ProviderType = typeof allProviders[number];

packages/stack/src/components/oauth-button.tsx

@@ -148,6 +148,24 @@ function XIcon({ iconSize } : { iconSize: number} ) {
   );
 }
 
+function EarthoIcon({ iconSize }: { iconSize: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={iconSize} 
+      width={iconSize}
+      fill="none"
+      viewBox="0 0 512 512"
+    >
+      <rect width="512" height="512" fill="#000" rx="32"></rect>
+      <path
+        fill="#fff"
+        d="M158.284 401V110.091h196.023v50.71H219.79v69.318h124.432v50.711H219.79v69.46h135.085V401z"
+      ></path>
+    </svg>
+  );
+}
+
 const changeColor = (c: Color, value: number) => {
   if (c.isLight()) {
     value = -value;
@@ -278,6 +296,16 @@ export function OAuthButton({
       };
       break;
     }
+    case 'eartho': {
+      style = {
+        backgroundColor: "#fff",
+        textColor: "#000",
+        border: '1px solid #ddd',
+        name: "Eartho",
+        icon: <EarthoIcon iconSize={iconSize} />,
+      };
+      break;
+    }
     default: {
       style = {
         name: provider,