I managed to use the 'logo' property released with version 0.35.3 of supertokens-auth-react. The example in the changelog https://github.com/supertokens/supertokens-auth-react/blob/master/CHANGELOG.md#0353---2023-09-26 is not working. Can I create a branch with a working example and request a pull-request? I just used React.createElement to fix it

Hey. Sure. Please do

hey @ilbarbarossa , It should work fine. can you share the code that you have wrote to check this. and can you confirm your

supertokens-auth-react

version again please.

@akiraa1424 Sure, my version is

0.35.4

. I set the prop into the simple

config.ts

file, without using .tsx for creating the React Component. I was just adding another example into CHANGELOG.md without deleting nothing else ^^ Here is my personal code snippet:

ts
...
ThirdPartyReact.init({
            signInAndUpFeature: {
                providers: [Github.init(), Google.init(), Apple.init(),
                {
                    id: "twitch",
                    name: "Twitch",// Will display "Continue with Twitch",
                    logo: React.createElement(
                        "svg", 
                        {xmlns:"http://www.w3.org/2000/svg", width:"16", height:"16", fill:"#6441a4", className:"bi bi-twitch", viewBox:"0 0 16 16"},
                        createElement("path", {d:"M3.857 0 1 2.857v10.286h3.429V16l2.857-2.857H9.57L14.714 8V0H3.857zm9.714 7.429-2.285 2.285H9l-2 2v-2H4.429V1.143h9.142v6.286z"}),
                        createElement("path", {d:"M11.857 3.143h-1.143V6.57h1.143V3.143zm-3.143 0H7.571V6.57h1.143V3.143z"})
                        )
                }],
            },
        }),
...

Can you share the code that doesn’t work?

ahh, I see now. you should consider using .tsx extention to you config file

here (basically copy pasted svg tag):

ts
...
ThirdPartyReact.init({
            signInAndUpFeature: {
                providers: [Github.init(), Google.init(), Apple.init(),
                {
                    id: "twitch",
                    name: "Twitch",// Will display "Continue with Twitch",
                    logo: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#6441a4" class="bi bi-twitch" viewBox="0 0 16 16">
  <path d="M3.857 0 1 2.857v10.286h3.429V16l2.857-2.857H9.57L14.714 8V0H3.857zm9.714 7.429-2.285 2.285H9l-2 2v-2H4.429V1.143h9.142v6.286z"/>
  <path d="M11.857 3.143h-1.143V6.57h1.143V3.143zm-3.143 0H7.571V6.57h1.143V3.143z"/>
</svg>
                }],
            },
        }),
...

since you are writing jsx syntax, there is no harm in using .tsx for your config file unless it conflicts with somethinng else specific to your app

I think so yeah. I am still learning React 😅 so for me is much easier working directly in simple typescript

yeah no worries, ts compiler won't allow you to write jsx in .ts extended file. please rename you config file it should work fine. and let us know if you need more help. Thank you!

ok then. So i'll just deleting the fork

fix-example-logo-prop

i created. Thank you again ^^

yea, sure