Adds Keycloak OAuth provider (#1876)

waspc/cli/src/Wasp/Cli/Command/Studio.hs

@@ -182,6 +182,9 @@ studio = do
                          [ "google"
                            | isJust $ AS.App.Auth.google methods
                          ],
+                         [ "keycloak"
+                           | isJust $ AS.App.Auth.keycloak methods
+                         ],
                          [ "gitHub"
                            | isJust $ AS.App.Auth.gitHub methods
                          ],

waspc/data/Generator/templates/sdk/wasp/auth/forms/internal/common/LoginSignupForm.tsx

@@ -108,6 +108,9 @@ const SocialAuthButtons = styled('div', {
 {=# isGoogleAuthEnabled =}
 const googleSignInUrl = `${config.apiUrl}{= googleSignInPath =}`
 {=/ isGoogleAuthEnabled =}
+{=# isKeycloakAuthEnabled =}
+const keycloakSignInUrl = `${config.apiUrl}{= keycloakSignInPath =}`
+{=/ isKeycloakAuthEnabled =}
 {=# isGitHubAuthEnabled =}
 const gitHubSignInUrl = `${config.apiUrl}{= gitHubSignInPath =}`
 {=/ isGitHubAuthEnabled =}
@@ -192,6 +195,10 @@ export const LoginSignupForm = ({
               <SocialButton href={googleSignInUrl}><SocialIcons.Google/></SocialButton>
             {=/ isGoogleAuthEnabled =}
 
+            {=# isKeycloakAuthEnabled =}
+              <SocialButton href={keycloakSignInUrl}><SocialIcons.Keycloak/></SocialButton>
+            {=/ isKeycloakAuthEnabled =}
+
             {=# isGitHubAuthEnabled =}
               <SocialButton href={gitHubSignInUrl}><SocialIcons.GitHub/></SocialButton>
             {=/ isGitHubAuthEnabled =}

waspc/data/Generator/templates/sdk/wasp/auth/forms/internal/social/SocialIcons.tsx

@@ -24,6 +24,21 @@ export const Google = () => (
   </svg>
 )
 
+export const Keycloak = () => (
+  <svg
+    className={defaultStyles()}
+    aria-hidden="true"
+    fill="currentColor"
+    viewBox="0 0 559 466"
+  >
+    <g id="brand" transform="matrix(1,0,0,1,-233.075,-279.1)" fill="#000000" fillRule="nonzero">
+      <path
+        d="M786.2,395.5L705.6,395.5C704.1,395.5 702.6,394.7 701.9,393.4L637.2,281.2C636.4,279.9 635,279.1 633.4,279.1L369.4,279.1C367.9,279.1 366.4,279.9 365.7,281.2L298.4,397.6L233.6,509.8C232.9,511.1 232.9,512.7 233.6,514.1L298.4,626.3L365.6,742.8C366.3,744.1 367.8,745 369.3,744.9L633.4,744.9C634.9,744.9 636.4,744.1 637.2,742.8L702,630.6C702.7,629.3 704.2,628.4 705.7,628.5L786.3,628.5C789,628.5 791.1,626.3 791.1,623.7L791.1,400.4C791,397.7 788.8,395.5 786.2,395.5ZM477.5,630.6L457.2,665.6C456.9,666.1 456.4,666.6 455.9,666.9C455.3,667.2 454.7,667.4 454,667.4L413.7,667.4C412.3,667.4 411,666.7 410.4,665.4L350.3,561.1L344.4,550.8L322.8,513.9C322.5,513.4 322.3,512.8 322.4,512.1C322.4,511.5 322.6,510.8 322.9,510.3L344.6,472.7L410.5,358.7C411.2,357.5 412.5,356.7 413.8,356.7L454,356.7C454.7,356.7 455.4,356.9 456.1,357.2C456.6,357.5 457.1,357.9 457.4,358.5L477.7,393.7C478.3,394.9 478.2,396.4 477.5,397.5L412.4,510.3C412.1,510.8 412,511.4 412,511.9C412,512.5 412.2,513 412.4,513.5L477.5,626.2C478.4,627.7 478.3,629.3 477.5,630.6ZM679.6,513.9L658,550.8L652.1,561.1L592,665.4C591.3,666.6 590.1,667.4 588.7,667.4L548.4,667.4C547.7,667.4 547.1,667.2 546.5,666.9C546,666.6 545.5,666.2 545.2,665.6L524.9,630.6C524,629.3 524,627.7 524.8,626.4L589.9,513.7C590.2,513.2 590.3,512.6 590.3,512.1C590.3,511.5 590.1,511 589.9,510.5L524.8,397.7C524.1,396.5 524,395.1 524.6,393.9L544.9,358.7C545.2,358.2 545.7,357.7 546.2,357.4C546.8,357 547.5,356.9 548.3,356.9L588.7,356.9C590.1,356.9 591.4,357.6 592,358.9L657.9,472.9L679.6,510.5C679.9,511.1 680.1,511.7 680.1,512.3C680.1,512.7 679.9,513.3 679.6,513.9Z"
+      />
+    </g>
+  </svg>
+)
+
 // PRIVATE API
 export const GitHub = () => (
   <svg

waspc/data/Generator/templates/sdk/wasp/auth/utils.ts

@@ -41,6 +41,7 @@ export type PossibleProviderData = {
   email: EmailProviderData;
   username: UsernameProviderData;
   google: OAuthProviderData;
+  keycloak: OAuthProviderData;
   github: OAuthProviderData;
 }
 

waspc/data/Generator/templates/sdk/wasp/client/auth/index.ts

@@ -9,6 +9,9 @@ export * from './username'
 {=# isGoogleAuthEnabled  =}
 export * from './google'
 {=/ isGoogleAuthEnabled =}
+{=# isKeycloakAuthEnabled  =}
+export * from './keycloak'
+{=/ isKeycloakAuthEnabled =}
 {=# isGitHubAuthEnabled =}
 export * from './github'
 {=/ isGitHubAuthEnabled =}

waspc/data/Generator/templates/sdk/wasp/client/auth/keycloak.ts

@@ -0,0 +1,2 @@
+// PUBLIC API
+export { signInUrl as keycloakSignInUrl } from '../../auth/helpers/Keycloak'

waspc/data/Generator/templates/server/src/auth/providers/config/keycloak.ts

@@ -0,0 +1,82 @@
+{{={= =}=}}
+import { Keycloak } from "arctic";
+
+import type { ProviderConfig } from "wasp/auth/providers/types";
+import { getRedirectUriForCallback } from "../oauth/redirect.js";
+import { ensureEnvVarsForProvider } from "../oauth/env.js";
+import { mergeDefaultAndUserConfig } from "../oauth/config.js";
+import { createOAuthProviderRouter } from "../oauth/handler.js";
+
+{=# userSignupFields.isDefined =}
+{=& userSignupFields.importStatement =}
+const _waspUserSignupFields = {= userSignupFields.importIdentifier =}
+{=/ userSignupFields.isDefined =}
+{=^ userSignupFields.isDefined =}
+const _waspUserSignupFields = undefined
+{=/ userSignupFields.isDefined =}
+{=# configFn.isDefined =}
+{=& configFn.importStatement =}
+const _waspUserDefinedConfigFn = {= configFn.importIdentifier =}
+{=/ configFn.isDefined =}
+{=^ configFn.isDefined =}
+const _waspUserDefinedConfigFn = undefined
+{=/ configFn.isDefined =}
+
+const _waspConfig: ProviderConfig = {
+    id: "{= providerId =}",
+    displayName: "{= displayName =}",
+    createRouter(provider) {
+        const env = ensureEnvVarsForProvider(
+            ["KEYCLOAK_REALM_URL", "KEYCLOAK_CLIENT_ID", "KEYCLOAK_CLIENT_SECRET"],
+            provider
+        );
+
+        const keycloak = new Keycloak(
+            env.KEYCLOAK_REALM_URL,
+            env.KEYCLOAK_CLIENT_ID,
+            env.KEYCLOAK_CLIENT_SECRET,
+            getRedirectUriForCallback(provider.id).toString(),
+        );
+
+        const config = mergeDefaultAndUserConfig({
+            scopes: {=& requiredScopes =},
+        }, _waspUserDefinedConfigFn);
+
+        async function getKeycloakProfile(accessToken: string): Promise<{
+            providerProfile: unknown;
+            providerUserId: string;
+        }> {
+            const userInfoEndpoint = `${env.KEYCLOAK_REALM_URL}/protocol/openid-connect/userinfo`;
+            const response = await fetch(
+                userInfoEndpoint,
+                {
+                    headers: {
+                        Authorization: `Bearer ${accessToken}`,
+                    },
+                }
+            );
+            const providerProfile = (await response.json()) as {
+                sub?: string;
+            };
+
+            if (!providerProfile.sub) {
+                throw new Error("Invalid profile");
+            }
+
+            return { providerProfile, providerUserId: providerProfile.sub };
+        }
+
+        return createOAuthProviderRouter({
+            provider,
+            stateTypes: ['state', 'codeVerifier'],
+            userSignupFields: _waspUserSignupFields,
+            getAuthorizationUrl: ({ state, codeVerifier }) => keycloak.createAuthorizationURL(state, codeVerifier, config),
+            getProviderInfo: async ({ code, codeVerifier }) => {
+                const { accessToken } = await keycloak.validateAuthorizationCode(code, codeVerifier);
+                return getKeycloakProfile(accessToken);
+            },
+        });
+    },
+}
+
+export default _waspConfig;

waspc/data/Generator/templates/server/src/auth/utils.ts

@@ -37,6 +37,7 @@ export type PossibleProviderData = {
   email: EmailProviderData;
   username: UsernameProviderData;
   google: OAuthProviderData;
+  keycloak: OAuthProviderData;
   github: OAuthProviderData;
 }