@atlasauth/angular 0.7.0 → 0.8.0

package/dist/fesm2022/atlasauth-angular.mjs

@@ -4,7 +4,7 @@ import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, Subject, combineLatest, firstValueFrom } from 'rxjs';
 import { map, distinctUntilChanged, filter, take } from 'rxjs/operators';
-import { TokenCache, SignOutNotifier, resolveFrontendApi, catalogLocale, configureReferralCapture, FapiClient, SignOutGuard, localizedErrorMessage, getTemplateToken, getProviderToken, signOutReasonFromClient, readRedirectResult, completeOAuthPopupLanding, mapOAuthPopupPayload, stripRedirectParams, closeOAuthPopupAfterSignIn, SDK_HEADER, sdkHeaderValue, reportSdkAdvisory, readExpiry, msUntilRefresh, nextStep, createCaptchaController, atlasCaptchaLabels, flowFromPending, initialFlow, fetchInstanceSettings, offeredFirstFactors, prepareFactor, signInCaptchaOptions, flowNeedsCaptcha, planFirstFactor, advanceWithCaptcha, createSignUp, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
+import { TokenCache, SignOutNotifier, resolveFrontendApi, withDevBrowser, catalogLocale, configureReferralCapture, FapiClient, SignOutGuard, localizedErrorMessage, getTemplateToken, getProviderToken, signOutReasonFromClient, readRedirectResult, completeOAuthPopupLanding, mapOAuthPopupPayload, stripRedirectParams, closeOAuthPopupAfterSignIn, SDK_HEADER, sdkHeaderValue, reportSdkAdvisory, readExpiry, msUntilRefresh, nextStep, createCaptchaController, atlasCaptchaLabels, flowFromPending, initialFlow, fetchInstanceSettings, offeredFirstFactors, prepareFactor, signInCaptchaOptions, flowNeedsCaptcha, planFirstFactor, advanceWithCaptcha, createSignUp, shouldKeepPolling, pollAttempt, signUp } from '@atlasauth/js';
 export { FapiClient, SIGN_OUT_EVENT, SignOutError, advance, flowFromPending, getProviderToken, initialFlow, onAtlasSignOut, pollAttempt, prepareFactor, requestForStep, shouldKeepPolling } from '@atlasauth/js';
 import { evaluate } from '@atlasauth/authz';
 export { evaluate, hasFromClaims } from '@atlasauth/authz';
@@ -171,6 +171,8 @@ const EN_US = {
     'signIn.codeSentTo': 'We sent a code to {email}. Enter it below.',
     'signIn.resendCode': 'Resend code',
     'signIn.magicLinkSent': 'Check your email for a sign-in link.',
+    'signIn.signedIn': 'You\'re signed in.',
+    'signIn.sessionNotKept': 'You signed in, but this browser didn\'t keep the session. If it blocks third-party cookies, allow cookies for this site and try again.',
     'signIn.checkOtherTab': 'You can close this tab — you are signed in where you started.',
     'signUp.title': 'Create your account',
     'signUp.submit': 'Continue',
@@ -291,7 +293,7 @@ function withFallback(locale) {
 }
 
 /** This package's version, sent as `X-Atlas-SDK` (kept in step with package.json by a test). */
-const ATLAS_ANGULAR_VERSION = '0.7.0';
+const ATLAS_ANGULAR_VERSION = '0.8.0';
 const ATLAS_ANGULAR_SDK = { name: '@atlasauth/angular', version: ATLAS_ANGULAR_VERSION };
 
 /**
@@ -398,7 +400,8 @@ class AtlasService {
         this.baseUrl = resolveFrontendApi(options.frontendApi, {
             component: 'provideAtlas() / AtlasModule.forRoot()',
         });
-        this.doFetch = options.fetchImpl ?? ((...args) => fetch(...args));
+        // Development instances keep the session in a header where the browser blocks the cookie.
+        this.doFetch = withDevBrowser(options.publishableKey, options.fetchImpl ?? ((...args) => fetch(...args)));
         this.catalog = options.localization ? withFallback(options.localization) : EN_US;
         this.errorCatalog = options.localization ?? EN_US;
         this.requestLocale = catalogLocale(options.localization);
@@ -591,6 +594,7 @@ class AtlasService {
         await this.reload();
     }
     /** Re-read `/v1/client`: refresh user, session, memberships and status. */
+    /** Re-boot from the Frontend API. Resolves true when a session now exists in this browser. */
     async reload() {
         try {
             const response = await this.call('/v1/client');
@@ -601,7 +605,7 @@ class AtlasService {
             // refresh cookie; the guard re-tries its revoke in the background.
             if (!body.session || !body.user || this.guard.refuse(body.session.id)) {
                 this.clearLocalState(body.session ? 'other_tab' : signOutReasonFromClient(body));
-                return;
+                return false;
             }
             this.notifier.clear();
             this._user.next(body.user);
@@ -611,6 +615,7 @@ class AtlasService {
                 this.applyToken(body.jwt, body.session.id);
             this._status.next('signed_in');
             this.scheduleRefresh();
+            return true;
         }
         catch {
             // A failed boot is NOT signed-out. Rendering a sign-in form because the
@@ -618,6 +623,7 @@ class AtlasService {
             // needless re-authentication. Only promote loading → signed_out.
             if (this._status.value === 'loading')
                 this._status.next('signed_out');
+            return false;
         }
     }
     // --- Internals --------------------------------------------------------------
@@ -1078,6 +1084,8 @@ class AttemptFlowComponent {
     attempt = null;
     busy = false;
     errors = [];
+    /** `FlowState.sessionKept`: whether this browser kept the session the sign-in created. */
+    sessionKept = undefined;
     titleKey = 'signIn.title';
     /**
      * The sign-in captcha, drawn above the submit button on the identifier step
@@ -1192,6 +1200,12 @@ class AttemptFlowComponent {
             case 'await_oauth':
                 return [msg('signIn.magicLinkSent')];
             case 'done':
+                // Signed in only when this browser holds the session; a blocked cookie is said
+                // plainly. "Check the other tab" is for a sign-in completed on another device.
+                if (this.sessionKept === true)
+                    return [msg('signIn.signedIn')];
+                if (this.sessionKept === false)
+                    return [{ kind: 'alert', name: '', labelKey: 'signIn.sessionNotKept', type: 'text' }];
                 return [msg('signIn.checkOtherTab')];
             case 'restart':
                 return [msg('error.generic')];
@@ -1202,7 +1216,7 @@ class AttemptFlowComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttemptFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AttemptFlowComponent, isStandalone: true, selector: "atlas-attempt-flow", inputs: { attempt: "attempt", busy: "busy", errors: "errors", titleKey: "titleKey", captcha: "captcha", firstFactors: "firstFactors", preparedFactor: "preparedFactor" }, outputs: { submitFlow: "submitFlow", chooseFactor: "chooseFactor" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AttemptFlowComponent, isStandalone: true, selector: "atlas-attempt-flow", inputs: { attempt: "attempt", busy: "busy", errors: "errors", sessionKept: "sessionKept", titleKey: "titleKey", captcha: "captcha", firstFactors: "firstFactors", preparedFactor: "preparedFactor" }, outputs: { submitFlow: "submitFlow", chooseFactor: "chooseFactor" }, ngImport: i0, template: `
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
 
@@ -1229,6 +1243,8 @@ class AttemptFlowComponent {
                 <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
+          } @else if (f.kind === 'alert') {
+            <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ t(f.labelKey) }}</p>
           } @else {
             <p>{{ t(f.labelKey) }}</p>
           }
@@ -1294,6 +1310,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
+          } @else if (f.kind === 'alert') {
+            <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ t(f.labelKey) }}</p>
           } @else {
             <p>{{ t(f.labelKey) }}</p>
           }
@@ -1331,6 +1349,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], errors: [{
                 type: Input
+            }], sessionKept: [{
+                type: Input
             }], titleKey: [{
                 type: Input
             }], captcha: [{
@@ -1520,17 +1540,23 @@ class AtlasFlowController {
         await this.finish(next);
     }
     async finish(next) {
-        this.setState(next);
         if (next.attempt?.status === 'complete') {
+            // Stays busy until this browser actually holds the session: the completion
+            // alone says nothing about whether the cookie was kept.
+            this.setState({ ...next, busy: true });
+            let exchanged = true;
             if (next.ticket) {
-                await this.client.post('/v1/client/tickets/exchange', {
+                const res = await this.client.post('/v1/client/tickets/exchange', {
                     attempt_id: next.attempt.id,
                     ticket: next.ticket,
                 });
+                exchanged = res.ok;
             }
-            await this.reload();
+            const kept = exchanged && (await this.reload());
+            this.setState({ ...next, busy: false, sessionKept: kept });
         }
         else {
+            this.setState(next);
             // A magic-link step may now be pollable (a link opened on another device).
             this.syncPolling();
         }
@@ -1555,11 +1581,12 @@ class AtlasFlowController {
                     return;
                 // The ticket is exchanged by a normal request, so no session token ever
                 // appears in a URL.
-                await this.client.post('/v1/client/tickets/exchange', {
+                const res = await this.client.post('/v1/client/tickets/exchange', {
                     attempt_id: next.attempt.id,
                     ticket,
                 });
-                await this.reload();
+                const kept = res.ok && (await this.reload());
+                this.setState({ ...this.state(), sessionKept: kept });
                 this.stopPolling();
             })();
         }, 2_000);
@@ -1592,6 +1619,31 @@ class SignInComponent {
     atlas = inject(AtlasService);
     /** Where to send the user once the flow completes. Reserved for host routing. */
     afterUrl;
+    /**
+     * Where "No account? Sign up" goes. Default: the instance's hosted sign-up
+     * page (carrying the visitor's referral). `null` hides it. Always shown, never
+     * only after a failed sign-in, so it says nothing about whether an email has an account.
+     */
+    signUpUrl;
+    t(key) {
+        return translate(this.atlas.localization, key);
+    }
+    signUpHref() {
+        if (this.signUpUrl === null)
+            return null;
+        if (this.signUpUrl)
+            return this.signUpUrl;
+        try {
+            return signUp({
+                frontendApi: this.atlas.frontendApi,
+                redirectUrl: this.afterUrl ?? (typeof window !== 'undefined' ? window.location.href : undefined),
+                navigate: false,
+            });
+        }
+        catch {
+            return null;
+        }
+    }
     flow = new AtlasFlowController(this.atlas.createFapiClient(), () => this.atlas.reload(), 
     // Resume mid-flow if an OAuth redirect came back owing a second factor.
     this.atlas.pendingAttempt, (key) => translate(this.atlas.localization, key));
@@ -1608,11 +1660,12 @@ class SignInComponent {
         this.flow.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignInComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SignInComponent, isStandalone: true, selector: "atlas-sign-in", inputs: { afterUrl: "afterUrl" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SignInComponent, isStandalone: true, selector: "atlas-sign-in", inputs: { afterUrl: "afterUrl", signUpUrl: "signUpUrl" }, ngImport: i0, template: `
     <atlas-attempt-flow
       [attempt]="flow.state().attempt"
       [busy]="flow.state().busy"
       [errors]="flow.state().errors"
+      [sessionKept]="flow.state().sessionKept"
       titleKey="signIn.title"
       [captcha]="flow.captchaDrawn() ? flow.captcha : null"
       [firstFactors]="flow.firstFactors()"
@@ -1620,7 +1673,12 @@ class SignInComponent {
       (submitFlow)="flow.submit($event)"
       (chooseFactor)="flow.prepare($event)"
     ></atlas-attempt-flow>
-  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey", "captcha", "firstFactors", "preparedFactor"], outputs: ["submitFlow", "chooseFactor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    @if (flow.state().attempt?.status !== 'complete' && signUpHref(); as href) {
+      <p class="atlas-footer" data-atlas-sign-up-prompt="">
+        {{ t('signIn.noAccount') }} <a class="atlas-link" [href]="href">{{ t('signIn.signUpLink') }}</a>
+      </p>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "sessionKept", "titleKey", "captcha", "firstFactors", "preparedFactor"], outputs: ["submitFlow", "chooseFactor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
@@ -1634,6 +1692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       [attempt]="flow.state().attempt"
       [busy]="flow.state().busy"
       [errors]="flow.state().errors"
+      [sessionKept]="flow.state().sessionKept"
       titleKey="signIn.title"
       [captcha]="flow.captchaDrawn() ? flow.captcha : null"
       [firstFactors]="flow.firstFactors()"
@@ -1641,10 +1700,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       (submitFlow)="flow.submit($event)"
       (chooseFactor)="flow.prepare($event)"
     ></atlas-attempt-flow>
+    @if (flow.state().attempt?.status !== 'complete' && signUpHref(); as href) {
+      <p class="atlas-footer" data-atlas-sign-up-prompt="">
+        {{ t('signIn.noAccount') }} <a class="atlas-link" [href]="href">{{ t('signIn.signUpLink') }}</a>
+      </p>
+    }
   `,
                 }]
         }], propDecorators: { afterUrl: [{
                 type: Input
+            }], signUpUrl: [{
+                type: Input
             }] } });
 
 /**
@@ -2111,6 +2177,7 @@ class SignUpComponent {
         [attempt]="flow.state().attempt"
         [busy]="flow.state().busy"
         [errors]="flow.state().errors"
+        [sessionKept]="flow.state().sessionKept"
         titleKey="signUp.title"
         (submitFlow)="flow.submit($event)"
       ></atlas-attempt-flow>
@@ -2123,7 +2190,7 @@ class SignUpComponent {
         (submitSignUp)="flow.create($event.values, $event.consent)"
       ></atlas-sign-up-form>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey", "captcha", "firstFactors", "preparedFactor"], outputs: ["submitFlow", "chooseFactor"] }, { kind: "component", type: SignUpFormComponent, selector: "atlas-sign-up-form", inputs: ["settings", "busy", "errors", "captcha"], outputs: ["submitSignUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "sessionKept", "titleKey", "captcha", "firstFactors", "preparedFactor"], outputs: ["submitFlow", "chooseFactor"] }, { kind: "component", type: SignUpFormComponent, selector: "atlas-sign-up-form", inputs: ["settings", "busy", "errors", "captcha"], outputs: ["submitSignUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpComponent, decorators: [{
             type: Component,
@@ -2138,6 +2205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         [attempt]="flow.state().attempt"
         [busy]="flow.state().busy"
         [errors]="flow.state().errors"
+        [sessionKept]="flow.state().sessionKept"
         titleKey="signUp.title"
         (submitFlow)="flow.submit($event)"
       ></atlas-attempt-flow>