Profile Picture
Duncan Hamra

Light Google Auth Button

Works alone for prototypes and mockups. Works with Memberstack to enable Google Authentication.
Copy component
Download JSON
{"content":[{"id":"lurxbe","name":"div","parent":"cgvtsk","children":["fjqgwj"],"settings":{"_display":"inline-block"}},{"id":"fjqgwj","name":"div","parent":"lurxbe","children":["oqflqb","hruhuv"],"settings":{"_cssGlobalClasses":["cmrfcx"],"_attributes":[{"id":"kadzcz","name":"data-ms-auth-provider","value":"google"}],"tag":"a"}},{"id":"oqflqb","name":"code","parent":"fjqgwj","children":[],"settings":{"code":"\n\n\n","executeCode":true,"signature":"6fd373b9e4e389c80ba79b9a95c54308","user_id":1,"time":1739546560,"_width":"24px","_height":"24px","_margin":{"top":"1"}},"themeStyles":[]},{"id":"hruhuv","name":"text-basic","parent":"fjqgwj","children":[],"settings":{"text":"Continue with Google","_typography":{"text-align":"right"},"_attributes":[{"id":"xsooko","name":"data-ms-auth-connected-text","value":"Disconnect from Google"}]}}],"source":"bricksCopiedElements","sourceUrl":"https://duncan1.local","version":"1.12.1","globalClasses":[{"id":"cmrfcx","name":"social-button","settings":{"_padding":{"bottom":".75em","top":".75em","left":"1.25em","right":"1.25em"},"_border":{"width":{"bottom":"1","top":"1","right":"1","left":"1"},"radius":{"top":"4px","right":"4px","bottom":"4px","left":"4px"},"color":{"hex":"#dadce0"},"style":"solid"},"_background":{"color":{"hex":"#ffffff"}},"_columnGap":"12px","_alignSelf":"center","_justifyContent":"flex-start","_alignItems":"center","_direction":"row","_display":"flex","_boxShadow":{"values":{"offsetY":"1","spread":"0","blur":"2"},"color":{"hex":"rgba(0,0,0,0.05)"}},"_border:hover":{"color":{"hex":"#d2e3fc"}},"_background:hover":{"color":{"hex":"#f8faff"}},"_boxShadow:hover":{"values":{"offsetY":"1","spread":"0","blur":"3"},"color":{"hex":"rgba(66,133,244,0.15)"}},"_cssTransition":"all 0.2s cubic-bezier(0.4, 0, 0.2, 1)","_margin":{"bottom":"1em"}},"modified":1739547206,"user_id":1}],"globalElements":[]}

Our notes on this component

A simple yet familiar sight – a white Continue With Google button.

This component works with the Memberstack WordPress Plugin.

This Google auth button isn’t made to be used with the native Memberstack login form – rather, this can be used with any HTML form which has Memberstack installed via attributes.

Similar components

Profile Picture
Julian Galluzzo

Log In Form (Red & Beige)

Memberstack-powered login form with working Google Auth from our 2025 Online Course Template.
View now
Copy now
{"content":[{"id":"ccfhme","name":"section","parent":0,"children":["xzuswg"],"settings":{},"label":"Auth"},{"id":"xzuswg","name":"container","parent":"ccfhme","children":["yelrtm"],"settings":{}},{"id":"yelrtm","name":"block","parent":"xzuswg","children":["pmijpp","bfgzkm","yqaihj"],"settings":{"_cssGlobalClasses":["lhfzbg"]}},{"id":"pmijpp","name":"heading","parent":"yelrtm","children":[],"settings":{"text":"Log in","_cssGlobalClasses":["ziixdz"]}},{"id":"bfgzkm","name":"text-basic","parent":"yelrtm","children":[],"settings":{"text":"If you don't have an account, you can click here to sign up. If you forgot your password, you can click here to reset your password.","_cssGlobalClasses":["lxltzy"]},"label":"Paragraph"},{"id":"yqaihj","name":"ms-brcks-form","parent":"yelrtm","children":[],"settings":{"formType":"login","planAction":"add","fields":[{"type":"email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":"","id":"lqtjqj"},{"type":"password","placeholder":"Enter your password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":"","id":"ehrbua"}],"_cssGlobalClasses":["idrdai"],"socialAuth":[{"id":"okkrso","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"padding":{"bottom":"17","top":"17","left":"20","right":"20"},"border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"style":"solid","width":{"top":"1","right":"1","bottom":"1","left":"1"},"color":{"raw":"var(--border-base)"}}}],"fieldsLayout":"column"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"lhfzbg","name":"auth__block","settings":{"_width":"100%","_widthMax":"500","_margin":{"left":"auto","right":"auto"},"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"30","right":"30","bottom":"20","top":"45"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"40","right":"40","bottom":"40","left":"40"}},"_alignItems":"flex-start"}},{"id":"ziixdz","name":"auth__heading","settings":{"_margin":{"bottom":"20"},"_typography":{"font-size":"40","line-height":"1"}},"modified":1745235104,"user_id":1},{"id":"lxltzy","name":"auth__paragraph","settings":{"_margin":{"bottom":"40"},"_cssCustom":".link {\n text-decoration: underline;\n}","_typography":{"color":{"hex":"#696969"}}},"modified":1745235104,"user_id":1},{"id":"idrdai","name":"auth__form","settings":{"_width":"100%","buttonWidth":"100%","buttonTypography":{"text-align":"center","color":{"hex":"#ffffff"},"font-size":"18"},"buttonBackground":{"raw":"var(--brand-color)"},"buttonPadding":{"bottom":"16","top":"16","left":"20","right":"20"},"buttonMargin":{"top":"15"},"buttonBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"inputBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid"},"inputPadding":{"left":"20","right":"20","bottom":"6","top":"6"},"fieldsLayout":"column","fieldsGap":"15"},"modified":1745235104,"user_id":1}],"globalElements":[]}
Profile Picture
Julian Galluzzo

Create Account Form (Red & Beige)

Memberstack-powered sign up form from our 2025 Online Course Template.
View now
Copy now
{"content":[{"id":"56c33c","name":"section","parent":0,"children":["fd3a93"],"settings":{},"label":"Auth"},{"id":"fd3a93","name":"container","parent":"56c33c","children":["9a9986"],"settings":{}},{"id":"9a9986","name":"block","parent":"fd3a93","children":["22379b","eef3b4","a7ec9a"],"settings":{"_cssGlobalClasses":["lhfzbg"]}},{"id":"22379b","name":"heading","parent":"9a9986","children":[],"settings":{"text":"Create an account","_cssGlobalClasses":["ziixdz"]}},{"id":"eef3b4","name":"text-basic","parent":"9a9986","children":[],"settings":{"text":"If you already have an account, you can click here to log in.","_cssGlobalClasses":["lxltzy"]},"label":"Paragraph"},{"id":"a7ec9a","name":"ms-brcks-form","parent":"9a9986","children":[],"settings":{"formType":"signup","planAction":"add","fields":[{"type":"email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":"","id":"lqtjqj"},{"type":"password","placeholder":"Enter your password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":"","id":"ehrbua"}],"_cssGlobalClasses":["idrdai"],"socialAuth":[{"id":"okkrso","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"padding":{"bottom":"17","top":"17","left":"20","right":"20"},"border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"style":"solid","width":{"top":"1","right":"1","bottom":"1","left":"1"},"color":{"raw":"var(--border-base)"}}}],"fieldsLayout":"column"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"lhfzbg","name":"auth__block","settings":{"_width":"100%","_widthMax":"500","_margin":{"left":"auto","right":"auto"},"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"30","right":"30","bottom":"20","top":"45"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"40","right":"40","bottom":"40","left":"40"}},"_alignItems":"flex-start"}},{"id":"ziixdz","name":"auth__heading","settings":{"_margin":{"bottom":"20"},"_typography":{"font-size":"40","line-height":"1"}},"modified":1745235104,"user_id":1},{"id":"lxltzy","name":"auth__paragraph","settings":{"_margin":{"bottom":"40"},"_cssCustom":".link {\n text-decoration: underline;\n}","_typography":{"color":{"hex":"#696969"}}},"modified":1745235104,"user_id":1},{"id":"idrdai","name":"auth__form","settings":{"_width":"100%","buttonWidth":"100%","buttonTypography":{"text-align":"center","color":{"hex":"#ffffff"},"font-size":"18"},"buttonBackground":{"raw":"var(--brand-color)"},"buttonPadding":{"bottom":"16","top":"16","left":"20","right":"20"},"buttonMargin":{"top":"15"},"buttonBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"inputBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid"},"inputPadding":{"left":"20","right":"20","bottom":"6","top":"6"},"fieldsLayout":"column","fieldsGap":"15"},"modified":1745235104,"user_id":1}],"globalElements":[]}
Profile Picture
Julian Galluzzo

Reset Password Form (Red & Beige)

Memberstack-powered reset password form from our 2025 Online Course Template.
View now
Copy now
{"content":[{"id":"8842ff","name":"section","parent":0,"children":["c17d95"],"settings":{},"label":"Auth"},{"id":"c17d95","name":"container","parent":"8842ff","children":["85369c"],"settings":{}},{"id":"85369c","name":"block","parent":"c17d95","children":["30b86e","97175c","acffa4"],"settings":{"_cssGlobalClasses":["lhfzbg"],"_padding":{"bottom":"30"}}},{"id":"30b86e","name":"heading","parent":"85369c","children":[],"settings":{"text":"Reset password","_cssGlobalClasses":["ziixdz"]}},{"id":"97175c","name":"text-basic","parent":"85369c","children":[],"settings":{"text":"Check your email inbox to get the 6-digit code, and then enter it here along with your new password. Once your password has been changed you will be redirected to the login page.","_cssGlobalClasses":["lxltzy"]},"label":"Paragraph"},{"id":"acffa4","name":"ms-brcks-form","parent":"85369c","children":[],"settings":{"formType":"reset-password","planAction":"add","fields":[{"type":"number","placeholder":"6 Digit Code","required":true,"customFieldId":"token","width":"full","maxLength":"","value":"","id":"lqtjqj"},{"type":"password","placeholder":"Enter your new password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":"","id":"fubymb"}],"_cssGlobalClasses":["idrdai"],"socialAuth":[{"id":"okkrso","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"padding":{"bottom":"17","top":"17","left":"20","right":"20"},"border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"style":"solid","width":{"top":"1","right":"1","bottom":"1","left":"1"},"color":{"raw":"var(--border-base)"}}}],"fieldsLayout":"column","redirectUrl":"/reset-password","buttonText":"Reset password"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"lhfzbg","name":"auth__block","settings":{"_width":"100%","_widthMax":"500","_margin":{"left":"auto","right":"auto"},"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"30","right":"30","bottom":"20","top":"45"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"40","right":"40","bottom":"40","left":"40"}},"_alignItems":"flex-start"}},{"id":"ziixdz","name":"auth__heading","settings":{"_margin":{"bottom":"20"},"_typography":{"font-size":"40","line-height":"1"}},"modified":1745235104,"user_id":1},{"id":"lxltzy","name":"auth__paragraph","settings":{"_margin":{"bottom":"40"},"_cssCustom":".link {\n text-decoration: underline;\n}","_typography":{"color":{"hex":"#696969"}}},"modified":1745235104,"user_id":1},{"id":"idrdai","name":"auth__form","settings":{"_width":"100%","buttonWidth":"100%","buttonTypography":{"text-align":"center","color":{"hex":"#ffffff"},"font-size":"18"},"buttonBackground":{"raw":"var(--brand-color)"},"buttonPadding":{"bottom":"16","top":"16","left":"20","right":"20"},"buttonMargin":{"top":"15"},"buttonBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"inputBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid"},"inputPadding":{"left":"20","right":"20","bottom":"6","top":"6"},"fieldsLayout":"column","fieldsGap":"15"},"modified":1745235104,"user_id":1}],"globalElements":[]}

Nice, you've downloaded this template! Now let's get it on your website...

To use this component, go to your 'Templates', click 'Import', and upload the file you just downloaded! It's that simple. You can then copy/paste it to other sections of your website.
Close & continue

Nice, you've copied this component! Now let's paste it...

To paste this component, simply go to any Bricks page or component and click paste! Simple as that.
Close & continue