[core] Add more OAuth providers to SignInPage

codecov.yml

@@ -1,4 +1,6 @@
 coverage:
+ ignore:
+ - '*/icons/*'
  status:
  project:
  default:

docs/data/toolpad/core/components/sign-in-page/OAuthSignInPage.js

@@ -6,6 +6,8 @@ const providers = [
  { id: 'github', name: 'GitHub' },
  { id: 'google', name: 'Google' },
  { id: 'facebook', name: 'Facebook' },
+ { id: 'twitter', name: 'Twitter' },
+ { id: 'linkedin', name: 'LinkedIn' },
 ];
 
 // preview-end

docs/data/toolpad/core/components/sign-in-page/OAuthSignInPage.tsx

@@ -6,6 +6,8 @@ const providers = [
  { id: 'github', name: 'GitHub' },
  { id: 'google', name: 'Google' },
  { id: 'facebook', name: 'Facebook' },
+ { id: 'twitter', name: 'Twitter' },
+ { id: 'linkedin', name: 'LinkedIn' },
 ];
 // preview-end
 

docs/data/toolpad/core/components/sign-in-page/OAuthSignInPage.tsx.preview

@@ -2,6 +2,8 @@ const providers = [
  { id: 'github', name: 'GitHub' },
  { id: 'google', name: 'Google' },
  { id: 'facebook', name: 'Facebook' },
+ { id: 'twitter', name: 'Twitter' },
+ { id: 'linkedin', name: 'LinkedIn' },
 ];
 
 // ...

docs/data/toolpad/core/components/sign-in-page/sign-in-page.md

@@ -14,7 +14,36 @@ The `SignInPage` component is a quick way to generate a ready-to-use authenticat
 
 The `SignInPage` component can be set up with an OAuth provider by passing in a list of providers in the `providers` prop, along with a `signIn` function that accepts the `provider` as a parameter.
 
-{{"demo": "OAuthSignInPage.js", "iframe": true}}
+{{"demo": "OAuthSignInPage.js", "iframe": true, "height": 500}}
+
+:::info
+
+The following providers are supported and maintained by default:
+
+- Google
+- GitHub
+- Facebook
+- Microsoft (Entra ID)
+- Apple
+- Auth0
+- AWS Cognito
+- GitLab
+- Instagram
+- LINE
+- Okta
+- FusionAuth
+- Twitter
+- TikTok
+- LinkedIn
+- Slack
+- Spotify
+- Twitch
+- Discord
+- Keycloak
+- Credentials (username/password)
+
+Find details on how to set up each provider in the [Auth.js documentation](https://authjs.dev/getting-started/authentication/oauth/).
+:::
 
 ## Credentials
 

packages/toolpad-core/src/SignInPage/SignInPage.tsx

@@ -15,37 +15,52 @@ import LoadingButton, { LoadingButtonProps } from '@mui/lab/LoadingButton';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import PasswordIcon from '@mui/icons-material/Password';
-import FacebookIcon from '@mui/icons-material/Facebook';
+import AppleIcon from '@mui/icons-material/Apple';
 import Stack from '@mui/material/Stack';
+
+import GoogleIcon from './icons/Google';
+import FacebookIcon from './icons/Facebook';
+import TwitterIcon from './icons/Twitter';
+import InstagramIcon from './icons/Instagram';
+import TikTokIcon from './icons/TikTok';
+import LinkedInIcon from './icons/LinkedIn';
+import SlackIcon from './icons/Slack';
+import SpotifyIcon from './icons/Spotify';
+import TwitchIcon from './icons/Twitch';
+import DiscordIcon from './icons/Discord';
+import LineIcon from './icons/Line';
+import Auth0Icon from './icons/Auth0';
+import MicrosoftEntraIdIcon from './icons/MicrosoftEntra';
+import CognitoIcon from './icons/Cognito';
+import GitLabIcon from './icons/GitLab';
+import KeycloakIcon from './icons/Keycloak';
+import OktaIcon from './icons/Okta';
+import FusionAuthIcon from './icons/FusionAuth';
+
 import { BrandingContext, DocsContext, RouterContext } from '../shared/context';
 
 const IconProviderMap = new Map<string, React.ReactNode>([
  ['github', <GitHubIcon key="github" />],
  ['credentials', <PasswordIcon key="credentials" />],
- [
- 'google',
- // colored google icon
- <svg key="google" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
- <path
- d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
- fill="#4285F4"
- />
- <path
- d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
- fill="#34A853"
- />
- <path
- d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
- fill="#FBBC05"
- />
- <path
- d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
- fill="#EA4335"
- />
- <path d="M1 1h22v22H1z" fill="none" />
- </svg>,
- ],
+ ['google', <GoogleIcon key="google" />],
  ['facebook', <FacebookIcon key="facebook" />],
+ ['twitter', <TwitterIcon key="twitter" />],
+ ['apple', <AppleIcon key="apple" />],
+ ['instagram', <InstagramIcon key="instagram" />],
+ ['tiktok', <TikTokIcon key="tiktok" />],
+ ['linkedin', <LinkedInIcon key="linkedin" />],
+ ['slack', <SlackIcon key="slack" />],
+ ['spotify', <SpotifyIcon key="spotify" />],
+ ['twitch', <TwitchIcon key="twitch" />],
+ ['discord', <DiscordIcon key="discord" />],
+ ['line', <LineIcon key="line" />],
+ ['auth0', <Auth0Icon key="auth0" />],
+ ['microsoft-entra-id', <MicrosoftEntraIdIcon key="microsoft-entra-id" />],
+ ['cognito', <CognitoIcon key="cognito" />],
+ ['gitlab', <GitLabIcon key="gitlab" />],
+ ['keycloak', <KeycloakIcon key="keycloak" />],
+ ['okta', <OktaIcon key="okta" />],
+ ['fusionauth', <FusionAuthIcon key="fusionauth" />],
 ]);
 
 export interface AuthProvider {

packages/toolpad-core/src/SignInPage/icons/Auth0.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+function Auth0Icon() {
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 64 64">
+ <path
+ d="M49.012 51.774L42.514 32l17.008-12.22h-21.02L32.005 0h21.032l6.506 19.78c3.767 11.468-.118 24.52-10.53 31.993zm-34.023 0L31.998 64l17.015-12.226-17.008-12.22zm-10.516-32c-3.976 12.1.64 24.917 10.5 32.007v-.007L21.482 32 4.474 19.774l21.025.007L31.998 0H10.972z"
+ fill="#eb5424"
+ />
+ </svg>
+ );
+}
+
+export default Auth0Icon;

packages/toolpad-core/src/SignInPage/icons/Cognito.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+
+function CognitoIcon() {
+ return (
+ <svg height="24" width="24" viewBox="-.1 1.1 304.9 179.8" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="m86.4 66.4c0 3.7.4 6.7 1.1 8.9.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3l-6.3 4.2c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2s-7.4-11.2-7.4-19.2c0-8.5 3-15.4 9.1-20.6s14.2-7.8 24.5-7.8c3.4 0 6.9.3 10.6.8s7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3s-7.3 2-10.8 3.4c-1.6.7-2.8 1.1-3.5 1.3s-1.2.3-1.6.3c-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5s1.4-1.4 2.8-2.1c3.5-1.8 7.7-3.3 12.6-4.5 4.9-1.3 10.1-1.9 15.6-1.9 11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6v32.4zm-40.6 15.2c3.3 0 6.7-.6 10.3-1.8s6.8-3.4 9.5-6.4c1.6-1.9 2.8-4 3.4-6.4s1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7s-6.3-.6-9.4-.6c-6.7 0-11.6 1.3-14.9 4s-4.9 6.5-4.9 11.5c0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9l-23.5-77.3c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9s2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.8 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6s-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9s-2.1 1-3.8 1h-8.6c-1.9 0-3.2-.3-4-1s-1.5-2-1.9-4l-15.5-64.5-15.4 64.4c-.5 2-1.1 3.3-1.9 4s-2.2 1-4 1zm128.5 2.7c-5.2 0-10.4-.6-15.4-1.8s-8.9-2.5-11.5-4c-1.6-.9-2.7-1.9-3.1-2.8s-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3s1.5.6 2.5 1c3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3s5.2-5.4 5.2-9.5c0-2.8-.9-5.1-2.7-7s-5.2-3.6-10.1-5.2l-14.5-4.5c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1s4.2-6 7.2-8.2c3-2.3 6.4-4 10.4-5.2s8.2-1.7 12.6-1.7c2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6s3.2 1.2 4.2 1.8c1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8s-4.7 4.8-4.7 8.9c0 2.8 1 5.2 3 7.1s5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6s4.6 8.8 4.6 14c0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z"
+ fill="#252f3e"
+ />
+ <g clipRule="evenodd" fill="#f90" fillRule="evenodd">
+ <path d="m273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z" />
+ <path d="m287.2 128.1c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.3 1.1-4.1-1.9 4-9.9 12.9-32.2 8.7-37.5z" />
+ </g>
+ </svg>
+ );
+}
+export default CognitoIcon;

packages/toolpad-core/src/SignInPage/icons/Discord.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+
+function DiscordIcon() {
+ return (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ preserveAspectRatio="xMidYMid"
+ viewBox="0 0 256 199"
+ width="24"
+ height="24"
+ >
+ <path
+ fill="#5865F2"
+ d="M216.9 16.6A208.5 208.5 0 0 0 164 0c-2.2 4.1-4.9 9.6-6.7 14a194 194 0 0 0-58.6 0C97 9.6 94.2 4.1 92 0a207.8 207.8 0 0 0-53 16.6A221.5 221.5 0 0 0 1 165a211.2 211.2 0 0 0 65 33 161 161 0 0 0 13.8-22.8c-7.6-2.9-15-6.5-21.8-10.6l5.3-4.3a149.3 149.3 0 0 0 129.6 0c1.7 1.5 3.5 3 5.3 4.3a136 136 0 0 1-21.9 10.6c4 8 8.7 15.7 13.9 22.9a210.7 210.7 0 0 0 64.8-33.2c5.3-56.3-9-105.1-38-148.4ZM85.5 135.1c-12.7 0-23-11.8-23-26.2 0-14.4 10.1-26.2 23-26.2 12.8 0 23.2 11.8 23 26.2 0 14.4-10.2 26.2-23 26.2Zm85 0c-12.6 0-23-11.8-23-26.2 0-14.4 10.2-26.2 23-26.2 12.9 0 23.3 11.8 23 26.2 0 14.4-10.1 26.2-23 26.2Z"
+ />
+ </svg>
+ );
+}
+
+export default DiscordIcon;

packages/toolpad-core/src/SignInPage/icons/Facebook.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+
+function FacebookIcon() {
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48">
+ <path
+ fill="#316FF6"
+ d="M24,4C12.954,4,4,12.954,4,24s8.954,20,20,20s20-8.954,20-20S35.046,4,24,4z"
+ />
+ <path
+ fill="#fff"
+ d="M26.707,29.301h5.176l0.813-5.258h-5.989v-2.874c0-2.184,0.714-4.121,2.757-4.121h3.283V12.46 c-0.577-0.078-1.797-0.248-4.102-0.248c-4.814,0-7.636,2.542-7.636,8.334v3.498H16.06v5.258h4.948v14.452 C21.988,43.9,22.981,44,24,44c0.921,0,1.82-0.084,2.707-0.204V29.301z"
+ />
+ </svg>
+ );
+}
+
+export default FacebookIcon;

packages/toolpad-core/src/SignInPage/icons/FusionAuth.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+
+function FusionAuthIcon() {
+ return (
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 200 200"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <g id="fa_logo_purple_orange" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+ <g id="logo-white-only-copy" transform="translate(25, 22)" fillRule="nonzero">
+ <path
+ d="M42.1484996,137.754645 C36.6833384,134.611754 31.6963641,130.701607 27.3395673,126.143375 C26.0759931,127.729247 24.5313734,129.068742 22.7829727,130.094854 C21.8172658,130.640438 20.7996702,131.088456 19.745243,131.432278 C43.3171444,157.188724 81.514904,163.302868 111.940339,146.189533 C113.379034,145.362954 114.266165,143.829671 114.266165,142.169663 C114.266165,140.509655 113.379034,138.976372 111.940339,138.149793 L111.940339,138.149793 C110.544127,137.311693 108.807093,137.282725 107.383745,138.073803 C87.1145338,149.52678 62.3048166,149.4054 42.1484996,137.754645 Z"
+ id="Path"
+ fill="#1E293B"
+ />
+ <path
+ d="M42.1333109,23.8304593 C47.6002209,20.6754696 53.4933346,18.3259868 59.630634,16.8545787 C58.8680272,14.9186117 58.4764302,12.856306 58.4762967,10.7753799 C58.4791507,9.65265933 58.5910603,8.53287448 58.810447,7.43182054 C24.7434872,15.0010379 0.377235926,45.0557123 0,79.9718603 C0.00543281109,81.630629 0.893430551,83.1609286 2.33044934,83.9879579 C3.76746812,84.8149873 5.53593485,84.8135292 6.97158966,83.9841315 L6.97158966,83.9841315 C8.38121575,83.1916489 9.26556465,81.7110433 9.29545288,80.0934442 C9.54382298,56.8525337 22.0258546,35.4663534 42.1333109,23.8304593 Z"
+ id="Path"
+ fill="#1E293B"
+ />
+ <path
+ d="M140.722828,80.7925521 C140.720716,87.1061507 139.810183,93.3865586 138.019249,99.4404944 C140.061684,99.7400409 142.029781,100.420535 143.821313,101.44663 C144.782663,101.997028 145.692586,102.63284 146.540081,103.34638 C156.995816,70.0401536 143.153599,33.9149136 113.125054,16.1402728 C111.686863,15.3863646 109.959746,15.4380661 108.569167,16.2766538 C107.178589,17.1152416 106.326144,18.6191435 106.32029,20.243732 L106.32029,20.243732 C106.303683,21.8581638 107.14136,23.3611307 108.522894,24.1952112 C128.489516,36.0495444 140.728313,57.561493 140.722828,80.7925521 Z"
+ id="Path"
+ fill="#1E293B"
+ />
+ <path
+ d="M75.0167349,49.5150705 C87.6608927,49.5089266 99.0634414,57.1255404 103.906409,68.8126449 C108.749376,80.4997495 106.078804,93.9552423 97.1402067,102.90369 C88.201609,111.852137 74.7556924,114.530892 63.0734243,109.690625 C51.3911563,104.850357 43.773685,93.4444937 43.773685,80.7925521 C43.7904148,63.5313487 57.7661594,49.5402038 75.0167349,49.5150705 M75.0167349,40.2290952 C52.627938,40.2290952 34.4782321,58.3899751 34.4782321,80.7925521 C34.4782321,103.195129 52.627938,121.356006 75.0167349,121.356006 C97.4055318,121.356006 115.555241,103.195129 115.555241,80.7925521 C115.559269,70.0332192 111.289555,59.7134023 103.686237,52.1054045 C96.0829187,44.4974067 85.7694496,40.2250646 75.0167349,40.2290952 Z"
+ id="Shape"
+ fill="#1E293B"
+ />
+ <ellipse
+ id="Oval"
+ fill="#F58320"
+ cx="75.0015463"
+ cy="10.8209739"
+ rx="10.8143177"
+ ry="10.8209739"
+ />
+ <ellipse
+ id="Oval"
+ fill="#F58320"
+ cx="14.4444047"
+ cy="115.763143"
+ rx="10.8143177"
+ ry="10.8209739"
+ />
+ <ellipse
+ id="Oval"
+ fill="#F58320"
+ cx="135.558688"
+ cy="115.763143"
+ rx="10.8143177"
+ ry="10.8209739"
+ />
+ <path
+ d="M83.9780918,73.3911276 C83.9840178,69.0270314 80.8491326,65.2923902 76.5522173,64.5446237 C72.255302,63.7968572 68.0443705,66.2531497 66.5774916,70.3630144 C65.1106126,74.472879 66.8138325,79.0426297 70.6120269,81.1877 L67.7869382,95.5194112 C67.6945357,95.9718848 67.8127575,96.441852 68.1082279,96.7966347 C68.4036983,97.1514175 68.8443581,97.3525209 69.3058031,97.343483 L80.80361,97.343483 C81.265055,97.3525209 81.7057148,97.1514175 82.0011852,96.7966347 C82.2966556,96.441852 82.4148774,95.9718848 82.3224749,95.5194112 L79.4821976,81.1877 C82.2726337,79.5865952 83.9892107,76.6097505 83.9780918,73.3911276 L83.9780918,73.3911276 Z"
+ id="Path"
+ fill="#F58320"
+ />
+ </g>
+ </g>
+ </svg>
+ );
+}
+
+export default FusionAuthIcon;

packages/toolpad-core/src/SignInPage/icons/GitLab.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+
+export default function GitLabIcon() {
+ return (
+ <svg height="24" viewBox="-.1 .5 960.2 923.9" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="m958.9 442.4c1.1 26.1-2 52.1-9.2 77.2-7.1 25.1-18.3 48.8-33.1 70.3a240.43 240.43 0 0 1 -53.6 56.2l-.5.4-199.9 149.8-98.3 74.5-59.9 45.2c-3.5 2.7-7.4 4.7-11.5 6.1s-8.5 2.1-12.9 2.1c-4.3 0-8.7-.7-12.8-2.1s-8-3.4-11.5-6.1l-59.9-45.2-98.3-74.5-198.7-148.9-1.2-.8-.4-.4c-20.9-15.7-39-34.7-53.8-56.2s-26-45.3-33.2-70.4c-7.2-25.1-10.3-51.2-9.2-77.3 1.2-26.1 6.5-51.8 15.8-76.2l1.3-3.5 130.7-340.5q1-2.5 2.4-4.8 1.3-2.3 3.1-4.3 1.7-2.1 3.7-3.9 2-1.7 4.2-3.2c3.1-1.9 6.3-3.3 9.8-4.1 3.4-.9 7-1.3 10.5-1.1 3.6.2 7.1.9 10.4 2.2 3.3 1.2 6.5 3 9.3 5.2q2 1.7 3.9 3.6 1.8 2 3.2 4.3 1.5 2.2 2.6 4.7 1.1 2.4 1.8 5l88.1 269.7h356.6l88.1-269.7q.7-2.6 1.9-5 1.1-2.4 2.6-4.7 1.4-2.2 3.2-4.2 1.8-2 3.9-3.7c2.8-2.2 5.9-3.9 9.2-5.2 3.4-1.2 6.9-1.9 10.4-2.1 3.6-.2 7.1.1 10.6 1 3.4.9 6.7 2.3 9.7 4.2q2.3 1.4 4.3 3.2 2 1.7 3.7 3.8 1.7 2.1 3.1 4.4 1.3 2.3 2.3 4.8l130.5 340.6 1.3 3.5c9.3 24.3 14.6 50 15.7 76.1z"
+ fill="#e24329"
+ />
+ <path
+ d="m959 442.5c1.1 26-2 52.1-9.2 77.2s-18.4 48.9-33.2 70.4-32.9 40.5-53.7 56.2l-.5.4-199.9 149.8s-84.9-64.1-182.5-138l286.5-216.8c12.9-9.7 26.4-18.6 40.3-26.8 13.9-8.3 28.3-15.7 43-22.3 14.8-6.6 29.9-12.5 45.2-17.4 15.4-5 31-9.1 46.9-12.4l1.3 3.5c9.3 24.4 14.6 50.1 15.8 76.2z"
+ fill="#fc6d26"
+ />
+ <path
+ d="m480 658.5c97.6 73.7 182.6 138 182.6 138l-98.3 74.5-59.9 45.2c-3.5 2.7-7.4 4.7-11.5 6.1s-8.5 2.1-12.9 2.1c-4.3 0-8.7-.7-12.8-2.1s-8-3.4-11.5-6.1l-59.9-45.2-98.3-74.5s84.9-64.3 182.5-138z"
+ fill="#fca326"
+ />
+ <path
+ d="m480 658.3c-97.7 73.9-182.5 138-182.5 138l-198.7-148.9-1.2-.8-.4-.4c-20.9-15.7-39-34.7-53.8-56.2s-26-45.3-33.2-70.4c-7.2-25.1-10.3-51.2-9.2-77.3 1.2-26.1 6.5-51.8 15.8-76.2l1.3-3.5c15.9 3.3 31.5 7.4 46.9 12.4 15.3 5 30.4 10.8 45.2 17.5 14.7 6.6 29.1 14.1 43 22.3s27.3 17.2 40.3 26.9z"
+ fill="#fc6d26"
+ />
+ </svg>
+ );
+}

packages/toolpad-core/src/SignInPage/icons/Google.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+
+function GoogleIcon() {
+ return (
+ <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+ <path
+ d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+ fill="#4285F4"
+ />
+ <path
+ d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+ fill="#34A853"
+ />
+ <path
+ d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+ fill="#FBBC05"
+ />
+ <path
+ d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+ fill="#EA4335"
+ />
+ <path d="M1 1h22v22H1z" fill="none" />
+ </svg>
+ );
+}
+
+export default GoogleIcon;