https://www.ory.sh/ logo
Join Slack
Powered by
Is it possible to customise the social sign in but...
# ory-network
l
Is it possible to customise the social sign in buttons with Ory Elements to add the provider logo. As it is, there isn’t one which means that I don’t think we can conform to Google’s brand guidelines for sign in with Google Ref: https://developers.google.com/identity/branding-guidelines
As it is, the login form is rendering as and I can’t seem to find a way of customising the 
ButtonSocial
component from elements.
Along those same lines when poking around in the ory elements repo - I’ve noticed the new 
@ory/elements-react
package. Which looks significantly more customizable - what state is this in & when would you start recommending building with it?
b
1. How are you configuring the Google provider? The preset should have the logo in it. 2. `re @ory/elements-react`: We're still working on it, but are aiming for stable releases soon ish (coming months). There is still a bunch of supporting infrastructure TBD, such as docs, etc. So the dev experience is still rough. But that's next on our todo list.
l
1. How are you configuring the Google provider? The preset should have the logo in it. Still working on getting it through our IaC stuff - right now I’ve just configged it through the console
Copy code
"oidc": {
                "config": {
                    "base_redirect_uri": "<https://auth.bbeng.dev>",
                    "providers": [
                        {
                            "client_id": "<<CLIENT_ID>>",
                            "client_secret": "<<CLIENT_SECRET>>",
                            "id": "google",
                            "label": "Google",
                            "mapper_url": "<https://storage.googleapis.com/bac-gcs-production/2a5b5d21061466db16f418c42de643c42c9d3bf2b1d9409d069f4ab0e1049abf159da34f2eb5e726057663c0cce4d8cfbf0826751a58eb7ec3b7214308625e72.jsonnet>",
                            "provider": "google",
                            "scope": [
                                "email",
                                "profile"
                            ]
                        }
                    ]
                },
                "enabled": true
            },
`re @ory/elements-react`: We’re still working on it, but are aiming for stable releases soon ish (coming months). There is still a bunch of supporting infrastructure TBD, such as docs, etc. So the dev experience is still rough. But that’s next on our todo list.
Thanks - it actually looks like it would be really useful for us. We are currently mulling a revamp of our onboarding pages - and elements in it’s current form wouldn’t let us create the experience that we want without a lot of CSS hackery.
Ahhh figured it out
we weren’t importing the css files with the logo fonts 🤦 Adding
Copy code
import "@ory/elements/assets/fa-brands.min.css"
import "@ory/elements/assets/fontawesome.min.css"
sorted it
@tall-keyboard-87198 one other question, Right now the google icon is distinctly monochrome. IIRC this is against the google brand guidelines. Is there a CSS incantation I’m missing to add colours to it?
b
No, that's the only option for now.
Open in Slack
PreviousNext
Powered by