Repository navigation
Replies: 2 comments 2 replies
|
I think that what you have described is the default behavior for most services. SSOs were created as a mechanism to allow a user to authenticate from one service to another without giving all services access to the user's authentication details. As such, when the user authenticates, they are redirected to the SSO's login page, an optional login screen is displayed (it may not show if the user is already authenticated), and then redirected back to the service they have accessed with a set of user info (or a code that can be used to access that info). Note that with this approach, all user authentication is handled on the SSO side (there are some exceptions to this, like the OIDC Direct Access Grant / Resource Owner Password Credentials Flow, but for the most part this is how things work). Because the service already has access to the user's information after the user presses the sign-in button for one of the SSO providers, there is no real reason why the service would not be able to create an account on the spot (provided that enough information is released). I was about to give GitLab (a service with multiple SSO options that came to mind) as an example, but they also have the SSO buttons on the sign-up page. However, other sites (e.g. Moodle or Microsoft - although their signup page is different) only have the SSO options on the login page, since creating an account as a separate step is not required. |
|
Yeah, to me they should be on both since the SSO buttons can either log in or actually create a new account. Again, my concern with keycloak is that it implies to the user that you cannot register on the login page using the SSO buttons because it specifically asks if you're a new user and you should go to the register page where you can only create a local account. Visiting other sites, I noticed that zillow.com agrees with gitlab. They have a nice tabbed interface for login or signup, where SSO are below outside the tabs. |
|
there's a workaround with Keycloakify https://docs.keycloakify.dev/faq/some-values-you-need-are-missing-from-in-kccontext |
I hate to bother.. But I followed this above documentation.. And was not able to get it working.. Below is my code:
/* eslint-disable @typescript-eslint/no-empty-object-type */
import type { ExtendKcContext } from "keycloakify/login";
import type { KcContext as KcContext_base } from "keycloakify/login/KcContext";
import type { KcEnvName, ThemeName } from "../kc.gen";
export type KcContextExtension = {
themeName: ThemeName;
properties: Record<KcEnvName, string> & {};
// NOTE: Here you can declare more properties to extend the KcContext
// See: https://docs.keycloakify.dev/faq-and-help/some-values-you-need-are-missing-from-in-kccontext
};
export type KcContextExtensionPerPage = {
"register.ftl": {
social: KcContext_base.Login["social"];
}
};
export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;
import type { DeepPartial } from "keycloakify/tools/DeepPartial";
import type { KcContext } from "./KcContext";
import KcPage from "./KcPage";
import { createGetKcContextMock } from "keycloakify/login/KcContext";
import type { KcContextExtension, KcContextExtensionPerPage } from "./KcContext";
import { themeNames, kcEnvDefaults } from "../kc.gen";
const kcContextExtension: KcContextExtension = {
themeName: themeNames[0],
properties: {
...kcEnvDefaults
}
};
const { getKcContextMock: getKcContextMock_base } = createGetKcContextMock({
kcContextExtension,
kcContextExtensionPerPage: {},
overrides: {},
overridesPerPage: {}
});
const kcContextExtensionPerPage: KcContextExtensionPerPage = {
"register.ftl": {
social: getKcContextMock_base({pageId: "login.ftl"}).social
}
};
export const { getKcContextMock } = createGetKcContextMock({
kcContextExtension,
kcContextExtensionPerPage,
overrides: {},
overridesPerPage: {}
});
export function createKcPageStory<PageId extends KcContext["pageId"]>(params: {
pageId: PageId;
}) {
const { pageId } = params;
function KcPageStory(props: {
kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>>;
}) {
const { kcContext: overrides } = props;
const kcContextMock = getKcContextMock({
pageId,
overrides
});
return <KcPage kcContext={kcContextMock} />;
}
return { KcPageStory };
}
import type { JSX } from "keycloakify/tools/JSX";
import { useState } from "react";
import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
import { kcSanitize } from "keycloakify/lib/kcSanitize";
import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
import { clsx } from "keycloakify/tools/clsx";
import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFieldsProps";
import type { PageProps } from "keycloakify/login/pages/PageProps";
import type { KcContext } from "../KcContext";
import type { I18n } from "../i18n";
import { FaGithub, FaFacebook, FaMicrosoft } from "react-icons/fa";
import { FaSquareXTwitter } from "react-icons/fa6";
import { FcGoogle } from "react-icons/fc";
import { useStyles } from "tss-react/mui";
type RegisterProps = PageProps<Extract<KcContext, { pageId: "register.ftl" }>, I18n> & {
UserProfileFormFields: LazyOrNot<(props: UserProfileFormFieldsProps) => JSX.Element>;
doMakeUserConfirmPassword: boolean;
};
export default function Register(props: RegisterProps) {
const {
kcContext,
i18n,
doUseDefaultCss,
Template,
classes,
UserProfileFormFields,
doMakeUserConfirmPassword } = props;
const { kcClsx } = getKcClsx({
doUseDefaultCss,
classes
});
const {
social,
messageHeader,
url,
messagesPerField,
recaptchaRequired,
recaptchaVisible,
recaptchaSiteKey,
recaptchaAction,
termsAcceptanceRequired,
} = kcContext;
const { msg, msgStr, advancedMsg } = i18n;
const { css, cx } = useStyles();
const iconMap: Record<string, JSX.Element> = {
google: <FcGoogle />,
github: <FaGithub />,
facebook: <FaFacebook />,
microsoft: <FaMicrosoft />,
twitter: <FaSquareXTwitter />,
// add more as needed
};
const [isFormSubmittable, setIsFormSubmittable] = useState(false);
const [areTermsAccepted, setAreTermsAccepted] = useState(false);
return (
<Template
kcContext={kcContext}
i18n={i18n}
doUseDefaultCss={doUseDefaultCss}
classes={classes}
headerNode={messageHeader !== undefined ? advancedMsg(messageHeader) : msg("registerTitle")}
displayMessage={messagesPerField.exists("global")}
displayRequiredFields
socialProvidersNode={
<>
{social?.providers !== undefined && social.providers.length !== 0 && (
<div id="kc-social-providers" className={kcClsx("kcFormSocialAccountSectionClass")}>
<hr />
<h2 className={cx(
css({
color: "#FFFFFF",
})
)}>{msg("identity-provider-login-label")}</h2>
{/* <ul className={kcClsx("kcFormSocialAccountListClass", social.providers.length > 3 && "kcFormSocialAccountListGridClass")}> */}
<ul
className={cx(
css({
display: "flex",
flexWrap: "wrap",
gap: "12px",
justifyContent: "center",
listStyle: "none",
padding: 0,
margin: "16px 0",
})
)}
>
{social.providers.map((...[p]) => (
<li key={p.alias}>
<a
id={`social-${p.alias}`}
href={p.loginUrl}
className={css({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "60px",
height: "60px",
borderRadius: "50%",
// backgroundColor: "#f0f0f0",
// color: "#333",
fontSize: "40px",
textDecoration: "none",
transition: "background-color 0.2s",
":hover": {
backgroundColor: "#e0e0e0"
}
})}
title={p.displayName}
>
{iconMap[p.alias] ?? "?"}
</a>
</li>
))}
</ul>
</div>
)}
</>
}
>
<form id="kc-register-form" className={kcClsx("kcFormClass")} action={url.registrationAction} method="post">
<UserProfileFormFields
kcContext={kcContext}
i18n={i18n}
kcClsx={kcClsx}
onIsFormSubmittableValueChange={setIsFormSubmittable}
doMakeUserConfirmPassword={doMakeUserConfirmPassword}
/>
{termsAcceptanceRequired && (
<TermsAcceptance
i18n={i18n}
kcClsx={kcClsx}
messagesPerField={messagesPerField}
areTermsAccepted={areTermsAccepted}
onAreTermsAcceptedValueChange={setAreTermsAccepted}
/>
)}
{recaptchaRequired && (recaptchaVisible || recaptchaAction === undefined) && (
<div className="form-group">
<div className={kcClsx("kcInputWrapperClass")}>
<div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} data-action={recaptchaAction}></div>
8000
</div>
</div>
)}
<div className={kcClsx("kcFormGroupClass")}>
<div id="kc-form-options" className={kcClsx("kcFormOptionsClass")}>
<div className={kcClsx("kcFormOptionsWrapperClass")}>
<span>
<a href={url.loginUrl}>{msg("backToLogin")}</a>
</span>
</div>
</div>
{recaptchaRequired && !recaptchaVisible && recaptchaAction !== undefined ? (
<div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
<button
className={clsx(
kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass"),
"g-recaptcha"
)}
data-sitekey={recaptchaSiteKey}
data-callback={() => {
(document.getElementById("kc-register-form") as HTMLFormElement).submit();
}}
data-action={recaptchaAction}
type="submit"
>
{msg("doRegister")}
</button>
</div>
) : (
<div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
<input
disabled={!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)}
className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
type="submit"
value={msgStr("doRegister")}
/>
</div>
)}
</div>
</form>
</Template>
);
}
function TermsAcceptance(props: {
i18n: I18n;
kcClsx: KcClsx;
messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
areTermsAccepted: boolean;
onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
}) {
const { i18n, kcClsx, messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange } = props;
const { msg } = i18n;
return (
<>
<div className="form-group">
<div className={kcClsx("kcInputWrapperClass")}>
{msg("termsTitle")}
<div id="kc-registration-terms-text">{msg("termsText")}</div>
</div>
</div>
<div className="form-group">
<div className={kcClsx("kcLabelWrapperClass")}>
<input
type="checkbox"
id="termsAccepted"
name="termsAccepted"
className={kcClsx("kcCheckboxInputClass")}
checked={areTermsAccepted}
onChange={e => onAreTermsAcceptedValueChange(e.target.checked)}
aria-invalid={messagesPerField.existsError("termsAccepted")}
/>
<label htmlFor="termsAccepted" className={kcClsx("kcLabelClass")}>
{msg("acceptTerms")}
</label>
</div>
{messagesPerField.existsError("termsAccepted") && (
<div className={kcClsx("kcLabelWrapperClass")}>
<span
id="input-error-terms-accepted"
className={kcClsx("kcInputErrorMessageClass")}
aria-live="polite"
dangerouslySetInnerHTML={{
__html: kcSanitize(messagesPerField.get("termsAccepted"))
}}
/>
</div>
)}
</div>
</>
);
}Login Page working: Register Page not working: Would really appreciate any feedback as to what I might be missing.. |
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
I've set up keycloak with local users, with user registration enabled along with a couple of social media IdPs configured.
Like many online services, on my site I have both a Login and a Sign-Up button.
Yet, using the IdP buttons on the login form seems to also register a new user.
Am I thinking about this wrong? Shouldn't the IdP buttons also be available on the registration form? The default login form even contains "New User? Register" messaging at the bottom. Isn't a user is led to believe, falsely, that to register with my site they must create a local user account when really they could just auth with one of the social media IdPs?
I poked around in the flows trying to see if the IdPs could be added to the registration form, but to no avail. I saw in the login.ftl in the base theme where it's pretty much hardcoded there. So I'll need to do some advanced theming to address this? Or am I going about it wrong?
TIA
All reactions