a965ca9d39
The update integrates a new property, shouldCreateUser, in MagicLinkAuthContainer component. This property defines the behavior for both the sign-in and sign-up methods. It is assigned false for sign-in and true for sign-up methods.
109 lines
2.4 KiB
TypeScript
109 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import type { Provider } from '@supabase/supabase-js';
|
|
|
|
import { isBrowser } from '@kit/shared/utils';
|
|
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
|
|
import { If } from '@kit/ui/if';
|
|
import { Separator } from '@kit/ui/separator';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import { MagicLinkAuthContainer } from './magic-link-auth-container';
|
|
import { OauthProviders } from './oauth-providers';
|
|
import { EmailPasswordSignUpContainer } from './password-sign-up-container';
|
|
|
|
export function SignUpMethodsContainer(props: {
|
|
paths: {
|
|
callback: string;
|
|
appHome: string;
|
|
};
|
|
|
|
providers: {
|
|
password: boolean;
|
|
magicLink: boolean;
|
|
oAuth: Provider[];
|
|
};
|
|
|
|
inviteToken?: string;
|
|
}) {
|
|
const redirectUrl = getCallbackUrl(props);
|
|
|
|
return (
|
|
<>
|
|
<If condition={props.inviteToken}>
|
|
<InviteAlert />
|
|
</If>
|
|
|
|
<If condition={props.providers.password}>
|
|
<EmailPasswordSignUpContainer emailRedirectTo={redirectUrl} />
|
|
</If>
|
|
|
|
<If condition={props.providers.magicLink}>
|
|
<MagicLinkAuthContainer
|
|
inviteToken={props.inviteToken}
|
|
redirectUrl={redirectUrl}
|
|
shouldCreateUser={true}
|
|
/>
|
|
</If>
|
|
|
|
<If condition={props.providers.oAuth.length}>
|
|
<Separator />
|
|
|
|
<OauthProviders
|
|
enabledProviders={props.providers.oAuth}
|
|
inviteToken={props.inviteToken}
|
|
shouldCreateUser={true}
|
|
paths={{
|
|
callback: props.paths.callback,
|
|
returnPath: props.paths.appHome,
|
|
}}
|
|
/>
|
|
</If>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function getCallbackUrl(props: {
|
|
paths: {
|
|
callback: string;
|
|
appHome: string;
|
|
};
|
|
|
|
inviteToken?: string;
|
|
}) {
|
|
if (!isBrowser()) {
|
|
return '';
|
|
}
|
|
|
|
const redirectPath = props.paths.callback;
|
|
const origin = window.location.origin;
|
|
const url = new URL(redirectPath, origin);
|
|
|
|
if (props.inviteToken) {
|
|
url.searchParams.set('invite_token', props.inviteToken);
|
|
}
|
|
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
const next = searchParams.get('next');
|
|
|
|
if (next) {
|
|
url.searchParams.set('next', next);
|
|
}
|
|
|
|
return url.href;
|
|
}
|
|
|
|
function InviteAlert() {
|
|
return (
|
|
<Alert variant={'info'}>
|
|
<AlertTitle>
|
|
<Trans i18nKey={'auth:inviteAlertHeading'} />
|
|
</AlertTitle>
|
|
|
|
<AlertDescription>
|
|
<Trans i18nKey={'auth:inviteAlertBody'} />
|
|
</AlertDescription>
|
|
</Alert>
|
|
);
|
|
}
|