mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-21 10:50:14 +01:00
🔄🔐 refactor: auth; style: match OpenAI; feat: custom social login order (#1421)
* refactor(Login & Registration) * fix(Registration) test errors * refactor(LoginForm & ResetPassword) * fix(LoginForm): display 'undefined' when loading page; style(SocialButton): match OpenAI's graphics * some refactor and style update for social logins * style: width like OpenAI; feat: custom social login order; refactor: alphabetical socials * fix(Registration & Login) test * Update .env.example * Update .env.example * Update dotenv.md * refactor: remove `SOCIAL_LOGIN_ORDER` for `socialLogins` configured from `librechat.yaml` - initialized by AppService, attached as app.locals property - rename socialLoginOrder and loginOrder to socialLogins app-wide for consistency - update types and docs - initialize config variable as array and not singular string to parse - bump data-provider to 0.3.9 --------- Co-authored-by: Danny Avila <messagedaniel@protonmail.com>
This commit is contained in:
Marco Beretta
GitHub
parent
25da90657d
commit
a2c35e8415
21 changed files with 536 additions and 532 deletions
|
|
@ -6,12 +6,12 @@ import { useAuthContext } from '~/hooks/AuthContext';
|
|||
import { getLoginError } from '~/utils';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import LoginForm from './LoginForm';
|
||||
import SocialButton from './SocialButton';
|
||||
|
||||
function Login() {
|
||||
const { login, error, isAuthenticated } = useAuthContext();
|
||||
const { data: startupConfig } = useGetStartupConfig();
|
||||
const localize = useLocalize();
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -20,9 +20,79 @@ function Login() {
|
|||
}
|
||||
}, [isAuthenticated, navigate]);
|
||||
|
||||
if (!startupConfig) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const socialLogins = startupConfig.socialLogins ?? [];
|
||||
|
||||
const providerComponents = {
|
||||
discord: (
|
||||
<SocialButton
|
||||
key="discord"
|
||||
enabled={startupConfig.discordLoginEnabled}
|
||||
serverDomain={startupConfig.serverDomain}
|
||||
oauthPath="discord"
|
||||
Icon={DiscordIcon}
|
||||
label={localize('com_auth_discord_login')}
|
||||
id="discord"
|
||||
/>
|
||||
),
|
||||
facebook: (
|
||||
<SocialButton
|
||||
key="facebook"
|
||||
enabled={startupConfig.facebookLoginEnabled}
|
||||
serverDomain={startupConfig.serverDomain}
|
||||
oauthPath="facebook"
|
||||
Icon={FacebookIcon}
|
||||
label={localize('com_auth_facebook_login')}
|
||||
id="facebook"
|
||||
/>
|
||||
),
|
||||
github: (
|
||||
<SocialButton
|
||||
key="github"
|
||||
enabled={startupConfig.githubLoginEnabled}
|
||||
serverDomain={startupConfig.serverDomain}
|
||||
oauthPath="github"
|
||||
Icon={GithubIcon}
|
||||
label={localize('com_auth_github_login')}
|
||||
id="github"
|
||||
/>
|
||||
),
|
||||
google: (
|
||||
<SocialButton
|
||||
key="google"
|
||||
enabled={startupConfig.googleLoginEnabled}
|
||||
serverDomain={startupConfig.serverDomain}
|
||||
oauthPath="google"
|
||||
Icon={GoogleIcon}
|
||||
label={localize('com_auth_google_login')}
|
||||
id="google"
|
||||
/>
|
||||
),
|
||||
openid: (
|
||||
<SocialButton
|
||||
key="openid"
|
||||
enabled={startupConfig.openidLoginEnabled}
|
||||
serverDomain={startupConfig.serverDomain}
|
||||
oauthPath="openid"
|
||||
Icon={() =>
|
||||
startupConfig.openidImageUrl ? (
|
||||
<img src={startupConfig.openidImageUrl} alt="OpenID Logo" className="h-5 w-5" />
|
||||
) : (
|
||||
<OpenIDIcon />
|
||||
)
|
||||
}
|
||||
label={startupConfig.openidLabel}
|
||||
id="openid"
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col items-center justify-center bg-white pt-6 sm:pt-0">
|
||||
<div className="mt-6 w-96 overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
|
||||
<div className="mt-6 w-authPageWidth overflow-hidden bg-white px-6 py-4 sm:max-w-md sm:rounded-lg">
|
||||
<h1 className="mb-4 text-center text-3xl font-semibold">
|
||||
{localize('com_auth_welcome_back')}
|
||||
</h1>
|
||||
|
|
@ -34,95 +104,28 @@ function Login() {
|
|||
{localize(getLoginError(error))}
|
||||
</div>
|
||||
)}
|
||||
{startupConfig?.emailLoginEnabled && <LoginForm onSubmit={login} />}
|
||||
{startupConfig?.registrationEnabled && (
|
||||
{startupConfig.emailLoginEnabled && <LoginForm onSubmit={login} />}
|
||||
{startupConfig.registrationEnabled && (
|
||||
<p className="my-4 text-center text-sm font-light text-gray-700">
|
||||
{' '}
|
||||
{localize('com_auth_no_account')}{' '}
|
||||
<a href="/register" className="p-1 font-medium text-green-500 hover:underline">
|
||||
<a href="/register" className="p-1 font-medium text-green-500">
|
||||
{localize('com_auth_sign_up')}
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
{startupConfig?.socialLoginEnabled && startupConfig?.emailLoginEnabled && (
|
||||
{startupConfig.socialLoginEnabled && (
|
||||
<>
|
||||
<div className="relative mt-6 flex w-full items-center justify-center border border-t uppercase">
|
||||
<div className="absolute bg-white px-3 text-xs">Or</div>
|
||||
</div>
|
||||
<div className="mt-8" />
|
||||
</>
|
||||
)}
|
||||
{startupConfig?.googleLoginEnabled && startupConfig?.socialLoginEnabled && (
|
||||
<>
|
||||
<div className="mt-2 flex gap-x-2">
|
||||
<a
|
||||
aria-label="Login with Google"
|
||||
className="justify-left flex w-full items-center space-x-3 rounded-md border border-gray-300 px-5 py-3 hover:bg-gray-50 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1"
|
||||
href={`${startupConfig.serverDomain}/oauth/google`}
|
||||
>
|
||||
<GoogleIcon />
|
||||
<p>{localize('com_auth_google_login')}</p>
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{startupConfig?.facebookLoginEnabled && startupConfig?.socialLoginEnabled && (
|
||||
<>
|
||||
<div className="mt-2 flex gap-x-2">
|
||||
<a
|
||||
aria-label="Login with Facebook"
|
||||
className="justify-left flex w-full items-center space-x-3 rounded-md border border-gray-300 px-5 py-3 hover:bg-gray-50 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1"
|
||||
href={`${startupConfig.serverDomain}/oauth/facebook`}
|
||||
>
|
||||
<FacebookIcon />
|
||||
<p>{localize('com_auth_facebook_login')}</p>
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{startupConfig?.openidLoginEnabled && startupConfig?.socialLoginEnabled && (
|
||||
<>
|
||||
<div className="mt-2 flex gap-x-2">
|
||||
<a
|
||||
aria-label="Login with OpenID"
|
||||
className="justify-left flex w-full items-center space-x-3 rounded-md border border-gray-300 px-5 py-3 hover:bg-gray-50 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1"
|
||||
href={`${startupConfig.serverDomain}/oauth/openid`}
|
||||
>
|
||||
{startupConfig.openidImageUrl ? (
|
||||
<img src={startupConfig.openidImageUrl} alt="OpenID Logo" className="h-5 w-5" />
|
||||
) : (
|
||||
<OpenIDIcon />
|
||||
)}
|
||||
<p>{startupConfig.openidLabel}</p>
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{startupConfig?.githubLoginEnabled && startupConfig?.socialLoginEnabled && (
|
||||
<>
|
||||
<div className="mt-2 flex gap-x-2">
|
||||
<a
|
||||
aria-label="Login with GitHub"
|
||||
className="justify-left flex w-full items-center space-x-3 rounded-md border border-gray-300 px-5 py-3 hover:bg-gray-50 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1"
|
||||
href={`${startupConfig.serverDomain}/oauth/github`}
|
||||
>
|
||||
<GithubIcon />
|
||||
<p>{localize('com_auth_github_login')}</p>
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{startupConfig?.discordLoginEnabled && startupConfig?.socialLoginEnabled && (
|
||||
<>
|
||||
<div className="mt-2 flex gap-x-2">
|
||||
<a
|
||||
aria-label="Login with Discord"
|
||||
className="justify-left flex w-full items-center space-x-3 rounded-md border border-gray-300 px-5 py-3 hover:bg-gray-50 focus:ring-2 focus:ring-violet-600 focus:ring-offset-1"
|
||||
href={`${startupConfig.serverDomain}/oauth/discord`}
|
||||
>
|
||||
<DiscordIcon />
|
||||
<p>{localize('com_auth_discord_login')}</p>
|
||||
</a>
|
||||
{startupConfig.emailLoginEnabled && (
|
||||
<>
|
||||
<div className="relative mt-6 flex w-full items-center justify-center border border-t uppercase">
|
||||
<div className="absolute bg-white px-3 text-xs">Or</div>
|
||||
</div>
|
||||
<div className="mt-8" />
|
||||
</>
|
||||
)}
|
||||
<div className="mt-2">
|
||||
{socialLogins.map((provider) => providerComponents[provider] || null)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue