Allow custom render function to create your own elements

Author: aaronpowell

example/src/App.css

@@ -44,3 +44,8 @@
 a.login {
   display: block;
 }
+
+.login-button {
+  display: block;
+  margin: 10px;
+}

example/src/App.tsx

@@ -45,6 +45,19 @@ function App() {
           label={(name) => `Do sign in ${name}`}
         />
 
+        <br />
+        <p>Login with custom renderer.</p>
+        <StaticWebAuthLogins
+          customProviders={[{ id: "okta", name: "Okta" }]}
+          customRenderer={({ href, className, name }) => (
+            <button className="login-button">
+              <a href={href} className={className}>
+                Custom Login Renderer - {name}
+              </a>
+            </button>
+          )}
+        />
+
         <ClientPrincipalContextProvider>
           <UserDisplay />
         </ClientPrincipalContextProvider>

react-static-web-apps-auth/src/Login.tsx

@@ -7,24 +7,38 @@ export type LoginProps = {
   id: AuthProviders;
   postLoginRedirect?: string;
   label?: (name: string) => string;
+  customRenderer?: (props: RenderLoginProps) => JSX.Element;
 };
 
-const Login = ({
-  name,
-  id,
-  postLoginRedirect,
-  label = (name) => `Sign in using ${name}`,
-}: LoginProps) => {
-  return (
-    <a
-      href={`/.auth/login/${id}${
-        postLoginRedirect ? `?post_login_redirect_uri=${postLoginRedirect}` : ""
-      }`}
-      className={`${id} login ${StaticWebAppsClassName}`}
-    >
-      {label(name)}
-    </a>
+export type RenderLoginProps = LoginProps & {
+  href: string;
+  className: string;
+};
+
+const Login = (props: LoginProps) => {
+  const href = `/.auth/login/${props.id}${
+    props.postLoginRedirect
+      ? `?post_login_redirect_uri=${props.postLoginRedirect}`
+      : ""
+  }`;
+  const className = `${props.id} login ${StaticWebAppsClassName}`;
+
+  return props.customRenderer ? (
+    props.customRenderer({ ...props, href, className })
+  ) : (
+    <DefaultRenderer {...props} href={href} className={className} />
   );
 };
 
+const DefaultRenderer = ({
+  name,
+  label = (name) => `Sign in using ${name}`,
+  href,
+  className,
+}: RenderLoginProps) => (
+  <a href={href} className={className}>
+    {label(name)}
+  </a>
+);
+
 export default Login;

react-static-web-apps-auth/src/StaticWebAuthLogins.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Login, { LoginProps } from "./Login";
+import Login, { LoginProps, RenderLoginProps } from "./Login";
 
 export type CustomProvider = {
   id: string;
@@ -16,62 +16,96 @@ export type LoginProviderProps = {
   postLoginRedirect?: string;
   customProviders?: CustomProvider[];
   label?: (name: string) => string;
+  customRenderer?: (props: RenderLoginProps) => JSX.Element;
 };
 
-type LoginWrapperProps = Pick<LoginProps, "postLoginRedirect" | "label">;
+type LoginWrapperProps = Pick<
+  LoginProps,
+  "postLoginRedirect" | "label" | "customRenderer"
+>;
 
-const AzureADLogin = ({ postLoginRedirect, label }: LoginWrapperProps) => (
+const AzureADLogin = ({
+  postLoginRedirect,
+  label,
+  customRenderer,
+}: LoginWrapperProps) => (
   <Login
     name="Azure AD"
     id="aad"
     postLoginRedirect={postLoginRedirect}
     label={label}
     key="aad"
+    customRenderer={customRenderer}
   />
 );
-const FacebookLogin = ({ postLoginRedirect, label }: LoginWrapperProps) => (
+const FacebookLogin = ({
+  postLoginRedirect,
+  label,
+  customRenderer,
+}: LoginWrapperProps) => (
   <Login
     name="Facebook"
     id="facebook"
     postLoginRedirect={postLoginRedirect}
     label={label}
     key="facebook"
+    customRenderer={customRenderer}
   />
 );
-const TwitterLogin = ({ postLoginRedirect, label }: LoginWrapperProps) => (
+const TwitterLogin = ({
+  postLoginRedirect,
+  label,
+  customRenderer,
+}: LoginWrapperProps) => (
   <Login
     name="Twitter"
     id="twitter"
     postLoginRedirect={postLoginRedirect}
     label={label}
     key="twitter"
+    customRenderer={customRenderer}
   />
 );
-const GitHubLogin = ({ postLoginRedirect, label }: LoginWrapperProps) => (
+const GitHubLogin = ({
+  postLoginRedirect,
+  label,
+  customRenderer,
+}: LoginWrapperProps) => (
   <Login
     name="GitHub"
     id="github"
     postLoginRedirect={postLoginRedirect}
     label={label}
     key="github"
+    customRenderer={customRenderer}
   />
 );
-const GoogleLogin = ({ postLoginRedirect, label }: LoginWrapperProps) => (
+const GoogleLogin = ({
+  postLoginRedirect,
+  label,
+  customRenderer,
+}: LoginWrapperProps) => (
   <Login
     name="Google"
     id="google"
     postLoginRedirect={postLoginRedirect}
     label={label}
     key="google"
+    customRenderer={customRenderer}
   />
 );
-const AppleLogin = ({ postLoginRedirect, label }: LoginWrapperProps) => (
+const AppleLogin = ({
+  postLoginRedirect,
+  label,
+  customRenderer,
+}: LoginWrapperProps) => (
   <Login
     name="Apple"
     id="apple"
     postLoginRedirect={postLoginRedirect}
     label={label}
     key="apple"
+    customRenderer={customRenderer}
   />
 );
 
@@ -80,13 +114,15 @@ const CustomProviderLogin = ({
   id,
   name,
   label,
+  customRenderer,
 }: LoginWrapperProps & CustomProvider) => (
   <Login
     name={name || id}
     id={id}
     postLoginRedirect={postLoginRedirect}
     label={label}
     key={id}
+    customRenderer={customRenderer}
   />
 );
 
@@ -99,6 +135,7 @@ const StaticWebAuthLogins = (props: LoginProviderProps) => {
         postLoginRedirect={props.postLoginRedirect}
         label={props.label}
         key="aad"
+        customRenderer={props.customRenderer}
       />
     );
   }
@@ -108,6 +145,7 @@ const StaticWebAuthLogins = (props: LoginProviderProps) => {
         postLoginRedirect={props.postLoginRedirect}
         label={props.label}
         key="apple"
+        customRenderer={props.customRenderer}
       />
     );
   }
@@ -117,6 +155,7 @@ const StaticWebAuthLogins = (props: LoginProviderProps) => {
         postLoginRedirect={props.postLoginRedirect}
         label={props.label}
         key="facebook"
+        customRenderer={props.customRenderer}
       />
     );
   }
@@ -126,6 +165,7 @@ const StaticWebAuthLogins = (props: LoginProviderProps) => {
         postLoginRedirect={props.postLoginRedirect}
         label={props.label}
         key="twitter"
+        customRenderer={props.customRenderer}
       />
     );
   }
@@ -135,6 +175,7 @@ const StaticWebAuthLogins = (props: LoginProviderProps) => {
         postLoginRedirect={props.postLoginRedirect}
         label={props.label}
         key="github"
+        customRenderer={props.customRenderer}
       />
     );
   }
@@ -144,6 +185,7 @@ const StaticWebAuthLogins = (props: LoginProviderProps) => {
         postLoginRedirect={props.postLoginRedirect}
         label={props.label}
         key="google"
+        customRenderer={props.customRenderer}
       />
     );
   }
@@ -157,6 +199,7 @@ const StaticWebAuthLogins = (props: LoginProviderProps) => {
           postLoginRedirect={props.postLoginRedirect}
           label={props.label}
           key={provider.id}
+          customRenderer={props.customRenderer}
         />
       );
     }