feat(auth): add abuse protection for login and OIDC flows with consent-based authorization handling
This commit is contained in:
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@idp.global/idp.global',
|
||||
version: '1.19.1',
|
||||
version: '1.20.0',
|
||||
description: 'An identity provider software managing user authentications, registrations, and sessions.'
|
||||
}
|
||||
|
||||
@@ -12,7 +12,6 @@ import {
|
||||
domtools,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
// third party catalogs
|
||||
import '@uptime.link/webwidget';
|
||||
|
||||
import '@design.estate/dees-catalog';
|
||||
@@ -29,6 +28,12 @@ declare global {
|
||||
export class IdpLoginPrompt extends DeesElement {
|
||||
public static demo = () => html`<idp-loginprompt></idp-loginprompt>`;
|
||||
|
||||
@state()
|
||||
accessor oidcConsentState: plugins.idpInterfaces.request.IReq_PrepareOidcAuthorization['response'] | null = null;
|
||||
|
||||
@state()
|
||||
accessor oidcConsentError = '';
|
||||
|
||||
@property()
|
||||
accessor productOfInterest: string;
|
||||
|
||||
@@ -48,6 +53,155 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
domtools.elementBasic.setup();
|
||||
}
|
||||
|
||||
private getOidcAuthorizationContext(): Omit<
|
||||
plugins.idpInterfaces.request.IReq_CompleteOidcAuthorization['request'],
|
||||
'jwt'
|
||||
> | null {
|
||||
const currentUrl = plugins.smarturl.Smarturl.createFromUrl(window.location.href);
|
||||
|
||||
if (currentUrl.searchParams.oauth !== 'true') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const clientId = currentUrl.searchParams.client_id;
|
||||
const redirectUri = currentUrl.searchParams.redirect_uri;
|
||||
const scope = currentUrl.searchParams.scope;
|
||||
const state = currentUrl.searchParams.state;
|
||||
|
||||
if (!clientId || !redirectUri || !scope || !state) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const prompt = ['none', 'login', 'consent'].includes(currentUrl.searchParams.prompt)
|
||||
? (currentUrl.searchParams.prompt as 'none' | 'login' | 'consent')
|
||||
: undefined;
|
||||
|
||||
return {
|
||||
clientId,
|
||||
redirectUri,
|
||||
scope,
|
||||
state,
|
||||
prompt,
|
||||
codeChallenge: currentUrl.searchParams.code_challenge || undefined,
|
||||
codeChallengeMethod:
|
||||
currentUrl.searchParams.code_challenge_method === 'S256' ? 'S256' : undefined,
|
||||
nonce: currentUrl.searchParams.nonce || undefined,
|
||||
};
|
||||
}
|
||||
|
||||
private redirectOidcError(errorArg: string, descriptionArg?: string) {
|
||||
const oidcContext = this.getOidcAuthorizationContext();
|
||||
if (!oidcContext) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const redirectUrl = new URL(oidcContext.redirectUri);
|
||||
redirectUrl.searchParams.set('error', errorArg);
|
||||
redirectUrl.searchParams.set('state', oidcContext.state);
|
||||
if (descriptionArg) {
|
||||
redirectUrl.searchParams.set('error_description', descriptionArg);
|
||||
}
|
||||
window.location.href = redirectUrl.toString();
|
||||
return true;
|
||||
}
|
||||
|
||||
private getOidcScopeDescription(scopeArg: plugins.idpInterfaces.data.TOidcScope) {
|
||||
const scopeMap: Record<plugins.idpInterfaces.data.TOidcScope, string> = {
|
||||
openid: 'Confirm your identity with this app.',
|
||||
profile: 'Share your display name and username.',
|
||||
email: 'Share your email address.',
|
||||
organizations: 'Share your organizations and their roles.',
|
||||
roles: 'Share your platform roles.',
|
||||
};
|
||||
|
||||
return scopeMap[scopeArg];
|
||||
}
|
||||
|
||||
private getOidcAppHost(appUrlArg: string) {
|
||||
try {
|
||||
return new URL(appUrlArg).hostname;
|
||||
} catch {
|
||||
return appUrlArg;
|
||||
}
|
||||
}
|
||||
|
||||
private async prepareOidcAuthorization(jwtArg: string) {
|
||||
const oidcContext = this.getOidcAuthorizationContext();
|
||||
if (!oidcContext) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
return idpState.idpClient.requests.prepareOidcAuthorization
|
||||
.fire({
|
||||
jwt: jwtArg,
|
||||
...oidcContext,
|
||||
})
|
||||
.catch(() => null);
|
||||
}
|
||||
|
||||
private async handleOidcAfterLogin(jwtArg: string) {
|
||||
const oidcContext = this.getOidcAuthorizationContext();
|
||||
if (!oidcContext) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const loginForm = this.shadowRoot.querySelector('#loginForm') as DeesForm | null;
|
||||
loginForm?.setStatus('pending', 'preparing application authorization...');
|
||||
this.oidcConsentError = '';
|
||||
|
||||
const preparation = await this.prepareOidcAuthorization(jwtArg);
|
||||
if (!preparation) {
|
||||
loginForm?.setStatus('error', 'could not prepare the application authorization');
|
||||
return true;
|
||||
}
|
||||
|
||||
if (preparation.status === 'consent_required') {
|
||||
if (oidcContext.prompt === 'none') {
|
||||
this.redirectOidcError('consent_required');
|
||||
return true;
|
||||
}
|
||||
|
||||
this.oidcConsentState = preparation;
|
||||
return true;
|
||||
}
|
||||
|
||||
await this.completeOidcAuthorization(jwtArg);
|
||||
return true;
|
||||
}
|
||||
|
||||
private async completeOidcAuthorization(jwtArg: string, consentApproved = false) {
|
||||
const oidcContext = this.getOidcAuthorizationContext();
|
||||
if (!oidcContext) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
const loginForm = this.shadowRoot.querySelector('#loginForm') as DeesForm | null;
|
||||
loginForm?.setStatus('pending', 'authorizing application...');
|
||||
this.oidcConsentError = '';
|
||||
|
||||
const response = await idpState.idpClient.requests.completeOidcAuthorization
|
||||
.fire({
|
||||
jwt: jwtArg,
|
||||
...oidcContext,
|
||||
consentApproved,
|
||||
})
|
||||
.catch(() => null);
|
||||
|
||||
if (!response?.redirectUrl) {
|
||||
if (this.oidcConsentState) {
|
||||
this.oidcConsentError = 'Could not authorize the application.';
|
||||
} else {
|
||||
loginForm?.setStatus('error', 'could not authorize the application');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
window.location.href = response.redirectUrl;
|
||||
return true;
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
@@ -103,10 +257,147 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
.form-footer a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.consent-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.consent-appname {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.consent-appurl {
|
||||
color: var(--muted-foreground);
|
||||
font-size: 14px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.consent-scopes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.consent-scope {
|
||||
padding: 14px 16px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.consent-scope-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.consent-scope-tag {
|
||||
color: #9cd67c;
|
||||
}
|
||||
|
||||
.consent-scope-description {
|
||||
margin-top: 6px;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.consent-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.consent-button {
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
padding: 12px 18px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.consent-button-secondary {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.consent-button-primary {
|
||||
background: linear-gradient(135deg, #9b7bff, #5fd1ff);
|
||||
color: #0a0a0a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.consent-error {
|
||||
color: #ff9a9a;
|
||||
font-size: 14px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (this.oidcConsentState) {
|
||||
return html`
|
||||
<idp-centercontainer>
|
||||
<div class="form-header">
|
||||
<h2>Continue to ${this.oidcConsentState.appName}</h2>
|
||||
<p>Review and approve the access this app is requesting.</p>
|
||||
</div>
|
||||
<div class="consent-card">
|
||||
<div class="consent-appname">${this.oidcConsentState.appName}</div>
|
||||
<div class="consent-appurl">${this.getOidcAppHost(this.oidcConsentState.appUrl)}</div>
|
||||
<div class="consent-scopes">
|
||||
${this.oidcConsentState.requestedScopes.map((scopeArg) => html`
|
||||
<div class="consent-scope">
|
||||
<div class="consent-scope-header">
|
||||
<span>${scopeArg}</span>
|
||||
${this.oidcConsentState.grantedScopes.includes(scopeArg)
|
||||
? html`<span class="consent-scope-tag">Previously allowed</span>`
|
||||
: null}
|
||||
</div>
|
||||
<div class="consent-scope-description">${this.getOidcScopeDescription(scopeArg)}</div>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
${this.oidcConsentError ? html`<div class="consent-error">${this.oidcConsentError}</div>` : null}
|
||||
<div class="consent-actions">
|
||||
<button
|
||||
class="consent-button consent-button-secondary"
|
||||
@click=${() => {
|
||||
this.redirectOidcError('access_denied');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
class="consent-button consent-button-primary"
|
||||
@click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
const jwt = await idpState.idpClient.getJwt();
|
||||
if (!jwt) {
|
||||
this.redirectOidcError('login_required');
|
||||
return;
|
||||
}
|
||||
await this.completeOidcAuthorization(jwt, true);
|
||||
}}
|
||||
>
|
||||
Allow and continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</idp-centercontainer>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<idp-centercontainer>
|
||||
<div class="form-header">
|
||||
@@ -115,12 +406,12 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
</div>
|
||||
<dees-form
|
||||
id="loginForm"
|
||||
@formData="${(eventArg) => {
|
||||
@formData=${(eventArg) => {
|
||||
this.login({
|
||||
emailAddress: eventArg.detail.data.emailAddress,
|
||||
passwordArg: eventArg.detail.data.password,
|
||||
});
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<dees-input-text
|
||||
id="loginEmailInput"
|
||||
@@ -137,7 +428,8 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
<dees-form-submit id="loginSubmitButton"></dees-form-submit>
|
||||
</dees-form>
|
||||
<div class="form-footer">
|
||||
Don't have an account? <a @click=${async () => {
|
||||
Don't have an account?
|
||||
<a @click=${async () => {
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
idpState.domtools.router.pushUrl('/register');
|
||||
}}>Create one</a>
|
||||
@@ -147,32 +439,48 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
|
||||
const loginPasswordInput: DeesInputText = loginForm.querySelector('#loginPasswordInput');
|
||||
const loginSubmitButton: DeesFormSubmit = loginForm.querySelector('#loginSubmitButton');
|
||||
await this.domtoolsPromise;
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
const loginForm = this.shadowRoot.querySelector('#loginForm') as DeesForm;
|
||||
const loginPasswordInput = loginForm.querySelector('#loginPasswordInput') as DeesInputText;
|
||||
const loginSubmitButton = loginForm.querySelector('#loginSubmitButton') as DeesFormSubmit;
|
||||
const oidcContext = this.getOidcAuthorizationContext();
|
||||
const setButtonText = async () => {
|
||||
if (loginPasswordInput.value) {
|
||||
console.log('updating text of loginprompt.');
|
||||
loginSubmitButton.text = 'Login';
|
||||
loginSubmitButton.text = oidcContext ? 'Sign in and continue' : 'Login';
|
||||
} else {
|
||||
loginSubmitButton.text = 'Send magic link (or enter password)';
|
||||
}
|
||||
};
|
||||
loginForm.changeSubject.subscribe(() => {
|
||||
console.log(`checking button text ${loginPasswordInput.value}`);
|
||||
setButtonText();
|
||||
void setButtonText();
|
||||
});
|
||||
setButtonText();
|
||||
await setButtonText();
|
||||
|
||||
if (oidcContext) {
|
||||
const loggedIn = await idpState.idpClient.determineLoginStatus(false);
|
||||
if (!loggedIn && oidcContext.prompt === 'none') {
|
||||
this.redirectOidcError('login_required');
|
||||
return;
|
||||
}
|
||||
|
||||
if (loggedIn && oidcContext.prompt !== 'login') {
|
||||
const jwt = await idpState.idpClient.getJwt();
|
||||
if (jwt) {
|
||||
await this.handleOidcAfterLogin(jwt);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private login = async (valueArg: { emailAddress: string; passwordArg: string }) => {
|
||||
// lets disable the submit button
|
||||
const loginSubmitButton: plugins.deesCatalog.DeesFormSubmit = this.shadowRoot.querySelector('#loginSubmitButton');
|
||||
const loginSubmitButton = this.shadowRoot.querySelector(
|
||||
'#loginSubmitButton'
|
||||
) as plugins.deesCatalog.DeesFormSubmit;
|
||||
loginSubmitButton.disabled = true;
|
||||
// lets define the needed requests
|
||||
|
||||
const idpState = await IdpState.getSingletonInstance();
|
||||
const loginForm: DeesForm = this.shadowRoot.querySelector('#loginForm');
|
||||
const loginForm = this.shadowRoot.querySelector('#loginForm') as DeesForm;
|
||||
const loginRequestWithUsernameAndPassword =
|
||||
idpState.idpClient.typedsocket.createTypedRequest<plugins.idpInterfaces.request.IReq_LoginWithEmailOrUsernameAndPassword>(
|
||||
'loginWithEmailOrUsernameAndPassword'
|
||||
@@ -182,19 +490,19 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
'loginWithEmail'
|
||||
);
|
||||
|
||||
// lets do the actual logging in
|
||||
if (valueArg.emailAddress && valueArg.passwordArg) {
|
||||
loginForm.setStatus('pending', 'logging in...');
|
||||
const response = await loginRequestWithUsernameAndPassword
|
||||
.fire({
|
||||
username: valueArg.emailAddress, // TODO: rename to emailAddress
|
||||
username: valueArg.emailAddress,
|
||||
password: valueArg.passwordArg,
|
||||
})
|
||||
.catch(() => {
|
||||
loginForm.setStatus('error', 'could not log you in. Try Again!');
|
||||
return;
|
||||
return null;
|
||||
});
|
||||
if (!response) {
|
||||
loginSubmitButton.disabled = false;
|
||||
return;
|
||||
}
|
||||
if (response.refreshToken) {
|
||||
@@ -202,11 +510,13 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
const jwt = await idpState.idpClient.refreshJwt(response.refreshToken);
|
||||
if (jwt) {
|
||||
loginForm.setStatus('success', 'obtained jwt.');
|
||||
idpState.domtools.router.pushUrl('/account');
|
||||
const oidcHandled = await this.handleOidcAfterLogin(jwt);
|
||||
if (!oidcHandled) {
|
||||
idpState.domtools.router.pushUrl('/account');
|
||||
}
|
||||
} else {
|
||||
loginForm.setStatus('error', 'something went wrong');
|
||||
}
|
||||
} else {
|
||||
}
|
||||
} else if (valueArg.emailAddress && !valueArg.passwordArg) {
|
||||
loginForm.setStatus('pending', 'sending magic link...');
|
||||
@@ -216,13 +526,13 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
if (response.status === 'ok') {
|
||||
loginForm.setStatus('success', 'Please check your email!');
|
||||
}
|
||||
console.log(response);
|
||||
}
|
||||
|
||||
loginSubmitButton.disabled = false;
|
||||
};
|
||||
|
||||
public async dispatchJwt(jwtArg?: string) {
|
||||
if (jwtArg !== undefined) {
|
||||
console.log(`dispatching jwt from loginprompt.`);
|
||||
this.jwt = jwtArg;
|
||||
await domtools.plugins.smartdelay.delayFor(200);
|
||||
this.dispatchEvent(
|
||||
@@ -237,9 +547,7 @@ export class IdpLoginPrompt extends DeesElement {
|
||||
}
|
||||
|
||||
public async focus() {
|
||||
(
|
||||
this.shadowRoot.querySelector('#loginEmailInput') as plugins.deesCatalog.DeesInputText
|
||||
).focus();
|
||||
(this.shadowRoot.querySelector('#loginEmailInput') as plugins.deesCatalog.DeesInputText).focus();
|
||||
}
|
||||
|
||||
public async show() {
|
||||
|
||||
Reference in New Issue
Block a user