Comments (4)
rishabhpoddar
commented on August 16, 2024
1
Right. This makes sense. We shall implement this soon enough whilst still keeping the buttonComponent method.
from supertokens-auth-react.
rishabhpoddar
commented on August 16, 2024
Hey @sullof can you elaborate on what misalignment you are seeing please?
from supertokens-auth-react.
sullof
commented on August 16, 2024
To add the Discord logo the the button, and have exactly the same style, I have to do this:
ThirdPartyPasswordless.init({
signInUpFeature: {
providers: [
ThirdPartyPasswordless.Google.init(),
ThirdPartyPasswordless.Apple.init(),
{
id: "discord",
name: "Discord",
buttonComponent: (
<button data-supertokens="button providerButton">
<div data-supertokens="providerButtonLeft">
<div data-supertokens="providerButtonLogo">
<div data-supertokens="providerButtonLogoCenter">
<svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 640 512"
>
<path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z" />
</svg>
</div>
</div>
</div>
<div data-supertokens="providerButtonText">
Continue with Discord
</div>
</button>
),
...
If in the future you decide to rename the value in the data fields, my button would be misaligned and would break.
If instead I just have a config like:
ThirdPartyPasswordless.init({
signInUpFeature: {
providers: [
ThirdPartyPasswordless.Google.init(),
ThirdPartyPasswordless.Apple.init(),
{
id: "discord",
name: "Discord",
logo: <svg
xmlns="http://www.w3.org/2000/svg"
height="1em"
viewBox="0 0 640 512"
>
<path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z" />
</svg>,
...
There is no risk of future incompatibilities.
from supertokens-auth-react.
nkshah2
commented on August 16, 2024
This has been released with version 0.35.3.
from supertokens-auth-react.
Related Issues (20)
- Vite run fails: ThirdPartyEmailPasswordPreBuiltUI dependency could not be resolved when importing HOT 3
- Example Issue on "with-one-login-per-subdomain" HOT 4
- getAccessToken() always returning the old access token after refreshing the session HOT 11
- Component wrapped in `SessionAuth` doesn't get the latest session context HOT 2
- NextJS demo app not working HOT 11
- Abstract away navigation from the pre built UI
- NextJS warning for styling HOT 2
- Update Needed: SuperTokens Compatibility with Next.js 14 (App Router) HOT 2
- Fail to import getSuperTokensRoutesForReactRouterDom HOT 2
- Possibility to override "thirdPartyEmailPasswordDivider" style HOT 2
- Overriding password reset component results in the logo outside the container
- SSR support for SessionAuth HOT 3
- Nested redirects HOT 2
- Create Remix example for TPEP recipe HOT 2
- Example Electron App out of date HOT 2
- Doesn't work on React Router 6.4 (v6.22.3) HOT 1
- Reduce size of `/recipe/thirdparty` import by removing default logos from it
- Add a way to end-to-end test OAuth2 flows
- Repeated email verification refresh calls when the backend is not running
- OAuth2: RP-initiated logout
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from supertokens-auth-react.