[Feat] Add translation option to text in Auth-component

[bergiusj]

Feature request

Is your feature request related to a problem? Please describe.

Currently the only way to change the text in the Auth component is through hacky CSS solutions. I myself encountered this problem when wanting to have the texts in the Auth component displayed in my native language.

Describe the solution you'd like

The ability to pass in translations as props to the Auth component. I was thinking a new prop called translations and that would look something like this: translations: { signInWith: 'New custom text', continueWith: 'New custom text' }. We could then check if the prop exists, otherwise just render the text as it is at the moment translations?.signIn || 'Sign in with'

Would love to hammer on it myself and make a PR 🤌🏻

Describe alternatives you've considered

Maybe the code gets cleaner if we set the current text (english) as fallback values on the the prop. So instead of having:
translations?.signInWith || ' Sign in with' we just have translations.signInWith and if the translations object is not passed as a prop, we have set a fallback value for each property. In this example we have translations = { signInWith: 'Sign in with' } I think i like this more than the solution above. Let me know what you guys think.

Additional context

Add any other context or screenshots about the feature request here.

[MildTomato]

Would love to hammer on it myself and make a PR 🤌🏻

Go for it! Might be best just to give it a go and improve as we go.

[grind-t]

If the amount of text to translate is relatively small, then it is possible to simply use a context with an object storing translated strings.
For example, in the MUI library, an object with translated strings (zhCN) is passed to ThemeProvider:

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { zhCN } from '@mui/material/locale';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  zhCN,
);

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;

Then the translations are used in the component using a hook. For example, the Alert component uses translated closeText string.
The Ant Design library uses a similar approach.

[MildTomato]

probably makes sense to add it to theming branch, a ThemeProvider is being worked on.
(i need to push up new changes i have locally to this branch)
supabase/ui#241

[grind-t]

@MildTomato I made a simple i18n implementation for myself. Another problem I've encountered is the inability to translate error messages from the API because the errors don't have codes 😢

[MildTomato]

@grind-t that's cool!
This is what I was going to add to the theme provider.

I was wondering if maybe there should be an option to change the labels/text without using a react provider to save some of us from having to wrap a provider around the Auth component, and instead just have an optional prop on the component instead.

But perhaps if you set the labels/test via the theme provider (like @grind-t's example) it will just override that prop.

I'd have to try it out

[MildTomato]

Perhaps I get the theme provider out quickly with the text support for Auth and then roll out the css class theme stuff afterwards so it unblocks this issue