@datalayer/core 0.0.17 → 0.0.18

package/lib/client/auth/strategies.js

@@ -0,0 +1,238 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+/**
+ * Authentication strategy implementations
+ */
+import * as authentication from '../../api/iam/authentication';
+import * as profile from '../../api/iam/profile';
+import { UserDTO } from '../../models/UserDTO';
+/**
+ * Base authentication strategy with common functionality
+ */
+class BaseAuthStrategy {
+    iamRunUrl;
+    storage;
+    constructor(iamRunUrl, storage) {
+        this.iamRunUrl = iamRunUrl;
+        this.storage = storage;
+    }
+    /**
+     * Validate a token by calling whoami
+     */
+    async validateToken(token) {
+        const response = await profile.whoami(token, this.iamRunUrl);
+        if (!response || !response.profile) {
+            throw new Error('Invalid response from profile API');
+        }
+        const userData = {
+            id: response.profile.id,
+            uid: response.profile.uid,
+            handle_s: response.profile.handle_s || response.profile.handle,
+            email_s: response.profile.email_s || response.profile.email,
+            first_name_t: response.profile.first_name_t || response.profile.first_name || '',
+            last_name_t: response.profile.last_name_t || response.profile.last_name || '',
+            avatar_url_s: response.profile.avatar_url_s || response.profile.avatar_url,
+        };
+        return new UserDTO(userData, undefined);
+    }
+}
+/**
+ * Token-based authentication strategy
+ * Authenticates using an existing token
+ */
+export class TokenAuthStrategy extends BaseAuthStrategy {
+    canHandle(options) {
+        return !!options.token;
+    }
+    async authenticate(options) {
+        if (!options.token) {
+            throw new Error('Token is required for token authentication');
+        }
+        // Validate the token
+        const user = await this.validateToken(options.token);
+        // Store the token if requested
+        if (!options.noStore && this.storage) {
+            if (this.storage.setToken) {
+                await this.storage.setToken(options.token);
+            }
+            if (this.storage.setUser) {
+                await this.storage.setUser(user);
+            }
+        }
+        return { user, token: options.token };
+    }
+}
+/**
+ * Credentials-based authentication strategy
+ * Authenticates using handle and password
+ */
+export class CredentialsAuthStrategy extends BaseAuthStrategy {
+    canHandle(options) {
+        return !!options.handle && !!options.password;
+    }
+    async authenticate(options) {
+        if (!options.handle || !options.password) {
+            throw new Error('Handle and password are required for credentials authentication');
+        }
+        // Call the login API
+        const response = await authentication.login({ handle: options.handle, password: options.password }, this.iamRunUrl);
+        if (!response || !response.success || !response.token) {
+            throw new Error(response?.message || 'Login failed');
+        }
+        const token = response.token;
+        // Get user profile
+        const user = await this.validateToken(token);
+        // Store the token if requested
+        if (!options.noStore && this.storage) {
+            this.storage.setToken?.(token);
+            this.storage.setUser?.(user);
+        }
+        return { user, token };
+    }
+}
+/**
+ * Storage-based authentication strategy
+ * Authenticates using a token from storage
+ */
+export class StorageAuthStrategy extends BaseAuthStrategy {
+    canHandle(options) {
+        // Can handle if:
+        // 1. Storage is available
+        // 2. No other auth method is provided (this is the fallback strategy)
+        if (!this.storage || !this.storage.isAvailable()) {
+            return false;
+        }
+        // Return true if no explicit auth method provided (empty options or noStore only)
+        // This allows the authenticate() method to check storage async
+        const hasExplicitAuthMethod = !!options.token ||
+            !!options.handle ||
+            !!options.password ||
+            !!options.useBrowser;
+        return !hasExplicitAuthMethod;
+    }
+    async authenticate(options) {
+        if (!this.storage) {
+            throw new Error('Storage is required for storage-based authentication');
+        }
+        // Try async getTokenAsync first (for VS Code async keytar support)
+        let token = null;
+        if ('getTokenAsync' in this.storage &&
+            typeof this.storage.getTokenAsync === 'function') {
+            token = await this.storage.getTokenAsync();
+        }
+        else if (this.storage.getToken) {
+            token = this.storage.getToken();
+        }
+        if (!token) {
+            throw new Error('No token found in storage');
+        }
+        // Validate the token
+        const user = await this.validateToken(token);
+        return { user, token };
+    }
+}
+/**
+ * Browser OAuth strategy
+ * Authenticates using browser-based OAuth flow with GitHub or LinkedIn
+ */
+export class BrowserOAuthStrategy extends BaseAuthStrategy {
+    canHandle(options) {
+        return !!options.useBrowser;
+    }
+    async authenticate(options) {
+        // Import OAuth2 API
+        const { getOAuth2AuthzUrl } = await import('../../api/iam/oauth2');
+        // Default to GitHub provider
+        const provider = options.oauthProvider || 'github';
+        if (provider !== 'github' && provider !== 'linkedin') {
+            throw new Error(`Unsupported OAuth provider: ${provider}. Use 'github' or 'linkedin'.`);
+        }
+        // Generate callback URI
+        const callbackUri = options.callbackUri || `${window.location.origin}/auth/callback`;
+        try {
+            // Step 1: Get OAuth authorization URL
+            const authzResponse = await getOAuth2AuthzUrl(provider, callbackUri, this.iamRunUrl, options.nonce);
+            // Step 2: Open OAuth URL in popup or redirect
+            if (options.usePopup !== false) {
+                // Use popup window
+                const popup = window.open(authzResponse.loginURL, 'oauth-login', 'width=600,height=700,left=100,top=100');
+                if (!popup) {
+                    throw new Error('Failed to open OAuth popup. Please allow popups for this site.');
+                }
+                // Wait for callback - Datalayer redirects to our callback with ?user=<json>&token=<token>
+                const result = await this.waitForOAuthCallback(popup, callbackUri);
+                // Extract token and user from callback result
+                const token = result.token;
+                const user = result.user;
+                if (!token) {
+                    throw new Error('No token received from OAuth callback');
+                }
+                if (!user) {
+                    throw new Error('No user data received from OAuth callback');
+                }
+                // Store token if requested
+                if (!options.noStore && this.storage) {
+                    this.storage.setToken?.(token);
+                    this.storage.setUser?.(user);
+                }
+                return { user, token };
+            }
+            else {
+                // Redirect to OAuth URL
+                window.location.href = authzResponse.loginURL;
+                // Return a pending promise (page will redirect)
+                return new Promise(() => {
+                    // This promise never resolves because we redirect
+                });
+            }
+        }
+        catch (error) {
+            throw new Error(`OAuth authentication failed: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    /**
+     * Wait for OAuth callback in popup window
+     * Expects: { user, token, error } from the Datalayer OAuth callback
+     */
+    async waitForOAuthCallback(popup, callbackUri) {
+        return new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                popup.close();
+                reject(new Error('OAuth authentication timed out'));
+            }, 5 * 60 * 1000); // 5 minute timeout
+            // Listen for message from popup
+            const handleMessage = (event) => {
+                // Verify origin
+                if (event.origin !== new URL(callbackUri).origin) {
+                    return;
+                }
+                clearTimeout(timeout);
+                window.removeEventListener('message', handleMessage);
+                popup.close();
+                if (event.data.error) {
+                    reject(new Error(`OAuth error: ${event.data.error}`));
+                }
+                else {
+                    resolve(event.data);
+                }
+            };
+            window.addEventListener('message', handleMessage);
+            // Check if popup was closed manually
+            const checkClosed = setInterval(() => {
+                if (popup.closed) {
+                    clearInterval(checkClosed);
+                    clearTimeout(timeout);
+                    window.removeEventListener('message', handleMessage);
+                    reject(new Error('OAuth popup was closed'));
+                }
+            }, 1000);
+        });
+    }
+}

package/lib/client/auth/types.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Authentication types and interfaces for the Datalayer SDK
+ */
+import { UserDTO } from '../../models/UserDTO';
+/**
+ * Authentication credentials for login
+ */
+export interface AuthCredentials {
+    handle: string;
+    password: string;
+}
+/**
+ * Authentication options for login flow
+ */
+export interface AuthOptions {
+    /**
+     * Existing authentication token
+     */
+    token?: string;
+    /**
+     * User handle for credentials-based auth
+     */
+    handle?: string;
+    /**
+     * Password for credentials-based auth
+     */
+    password?: string;
+    /**
+     * Use browser-based OAuth flow
+     */
+    useBrowser?: boolean;
+    /**
+     * OAuth provider (github or linkedin)
+     */
+    oauthProvider?: 'github' | 'linkedin';
+    /**
+     * Callback URI for OAuth redirect
+     */
+    callbackUri?: string;
+    /**
+     * Nonce for OAuth state parameter
+     */
+    nonce?: string;
+    /**
+     * Use popup window for OAuth (default: true). If false, redirects the current page.
+     */
+    usePopup?: boolean;
+    /**
+     * Don't store the token after authentication
+     */
+    noStore?: boolean;
+}
+/**
+ * Authentication result containing user and token
+ */
+export interface AuthResult {
+    user: UserDTO;
+    token: string;
+}
+/**
+ * Token storage backend interface
+ */
+export interface TokenStorage {
+    /**
+     * Get token from storage
+     */
+    get(key: string): string | null;
+    /**
+     * Set token in storage
+     */
+    set(key: string, value: string): void;
+    /**
+     * Delete token from storage
+     */
+    delete(key: string): void;
+    /**
+     * Check if storage is available
+     */
+    isAvailable(): boolean;
+    /**
+     * Get stored authentication token (convenience method)
+     */
+    getToken?(): string | null;
+    /**
+     * Store authentication token (convenience method)
+     * May be async to support keyring storage
+     */
+    setToken?(token: string): void | Promise<void>;
+    /**
+     * Delete authentication token (convenience method)
+     * May be async to support keyring storage
+     */
+    deleteToken?(): void | Promise<void>;
+    /**
+     * Store user data (optional)
+     * May be async to support keyring storage
+     */
+    setUser?(user: any): void | Promise<void>;
+    /**
+     * Clear all authentication data (optional)
+     * May be async to support keyring storage
+     */
+    clear?(): void | Promise<void>;
+}
+/**
+ * Authentication strategy interface
+ */
+export interface AuthStrategy {
+    /**
+     * Authenticate using this strategy
+     */
+    authenticate(options: AuthOptions): Promise<AuthResult>;
+    /**
+     * Check if this strategy can handle the given options
+     */
+    canHandle(options: AuthOptions): boolean;
+}
+/**
+ * Browser OAuth configuration
+ */
+export interface BrowserOAuthConfig {
+    /**
+     * OAuth provider name (e.g., 'github', 'linkedin')
+     */
+    provider: string;
+    /**
+     * Callback URL for OAuth redirect
+     */
+    callbackUrl: string;
+    /**
+     * IAM server URL
+     */
+    iamUrl: string;
+}
+/**
+ * Token validation result
+ */
+export interface TokenValidationResult {
+    /**
+     * Whether the token is valid
+     */
+    valid: boolean;
+    /**
+     * User associated with the token (if valid)
+     */
+    user?: UserDTO;
+    /**
+     * Error message (if invalid)
+     */
+    error?: string;
+}

package/lib/{examples/index.js → client/auth/types.js}

@@ -2,5 +2,7 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-export * from './NotebookMutationsKernel';
-export * from './NotebookMutationsServiceManager';
+/**
+ * Authentication types and interfaces for the Datalayer SDK
+ */
+export {};

package/lib/client/base.d.ts

@@ -1,4 +1,5 @@
 import { EnvironmentDTO } from '../models/EnvironmentDTO';
+import { AuthenticationManager } from './auth';
 /** Handlers for SDK method lifecycle events. */
 export interface SDKHandlers {
     /** Called before any SDK method execution */
@@ -35,6 +36,8 @@ export declare class DatalayerClientBase {
     readonly environments: EnvironmentDTO[];
     /** Method lifecycle handlers */
     readonly handlers?: SDKHandlers;
+    /** Authentication manager */
+    readonly auth: AuthenticationManager;
     /**
      * Create a DatalayerClient base instance.
      * @param config - Client configuration options

package/lib/client/base.js

@@ -7,6 +7,7 @@
  * @module client/base
  */
 import { DEFAULT_SERVICE_URLS } from '../api/constants';
+import { AuthenticationManager } from './auth';
 /** Base Client class providing core configuration and token management. */
 export class DatalayerClientBase {
     /** URL for IAM service */
@@ -21,6 +22,8 @@ export class DatalayerClientBase {
     environments = [];
     /** Method lifecycle handlers */
     handlers;
+    /** Authentication manager */
+    auth;
     /**
      * Create a DatalayerClient base instance.
      * @param config - Client configuration options
@@ -32,6 +35,12 @@ export class DatalayerClientBase {
         this.spacerRunUrl = config.spacerRunUrl || DEFAULT_SERVICE_URLS.SPACER;
         this.token = config.token;
         this.handlers = config.handlers;
+        // Initialize authentication manager
+        this.auth = new AuthenticationManager(this.iamRunUrl);
+        // If a token was provided, store it in the auth manager
+        if (this.token) {
+            this.auth.storeToken(this.token);
+        }
     }
     /**
      * Get the current configuration including service URLs and token.

package/lib/client/index.d.ts

@@ -68,6 +68,7 @@ export { HealthCheck } from '../models/HealthCheck';
 export type { HealthCheckJSON } from '../models/HealthCheck';
 export { ItemTypes } from './constants';
 export type { ItemType } from './constants';
+export * from './auth';
 export interface DatalayerClient {
     getToken(): string | undefined;
     setToken(token: string): Promise<void>;

package/lib/client/index.js

@@ -77,3 +77,5 @@ export { ItemDTO as Item } from '../models/ItemDTO';
 export { HealthCheck } from '../models/HealthCheck';
 // Export constants
 export { ItemTypes } from './constants';
+// Export authentication module
+export * from './auth';

package/lib/components/auth/Login.d.ts

@@ -0,0 +1,40 @@
+export interface ILoginProps {
+    /**
+     * Page heading
+     */
+    heading?: string;
+    /**
+     * Home page route
+     */
+    homeRoute: string;
+    /**
+     * Login page route
+     */
+    loginRoute?: string;
+    /**
+     * Join page route
+     */
+    joinRoute?: string;
+    /**
+     * Join confirmation route
+     */
+    joinConfirmRoute?: string;
+    /**
+     * Password route
+     */
+    passwordRoute?: string;
+    /**
+     * Show Email Login form
+     */
+    showEmailLogin?: boolean;
+    /**
+     * Show GitHub Login button
+     */
+    showGitHubLogin?: boolean;
+    /**
+     * Show token Login buttons
+     */
+    showTokenLogin?: boolean;
+}
+export declare const Login: (props: ILoginProps) => JSX.Element;
+export default Login;

package/lib/components/auth/Login.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useEffect, useState } from 'react';
+import { PageConfig, URLExt } from '@jupyterlab/coreutils';
+import { EyeIcon, EyeClosedIcon, MarkGithubIcon } from '@primer/octicons-react';
+import { Button, FormControl, Heading, Link, PageLayout, TextInput, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { asUser, IAMProvidersSpecs } from '../../models';
+import { useIAMStore } from '../../state';
+import { CenteredSpinner } from '../display';
+import { isInsideJupyterLab, validateLength } from '../../utils';
+import { useNavigate, useCache, useToast, useIAM } from '../../hooks';
+import { LoginToken } from './LoginToken';
+export const Login = (props) => {
+    const { heading, homeRoute, loginRoute, showEmailLogin = true, showGitHubLogin = true, showTokenLogin = true, } = props;
+    const { useLogin, useOAuth2AuthorizationURL } = useCache({ loginRoute });
+    const loginMutation = useLogin();
+    const getOAuth2URLMutation = useOAuth2AuthorizationURL();
+    const { loginAndNavigate, setLogin } = useIAM();
+    const { externalToken, iamProvidersAuthorizationURL, addIAMProviderAuthorizationURL, iamRunUrl, logout, checkIAMToken, } = useIAMStore();
+    const { enqueueToast } = useToast();
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(false);
+    const [loadingWithToken, setLoadingWithToken] = useState(-1);
+    const [formValues, setFormValues] = useState({
+        handle: undefined,
+        password: undefined,
+    });
+    const [validationResult, setValidationResult] = useState({
+        handle: undefined,
+        password: undefined,
+    });
+    const [passwordVisibility, setPasswordVisibility] = useState(false);
+    useEffect(() => {
+        const initIAMProvider = (iamProvider) => {
+            const callbackURI = isInsideJupyterLab()
+                ? URLExt.join(PageConfig.getBaseUrl(), iamProvider.oauth2CallbackServerRoute)
+                : location.protocol +
+                    '//' +
+                    location.hostname +
+                    ':' +
+                    location.port +
+                    iamProvider.oauth2CallbackUIRoute;
+            const queryArgs = {
+                provider: iamProvider.name,
+                callback_uri: callbackURI,
+            };
+            /*
+            const xsrfTokenMatch = document.cookie.match('\\b_xsrf=([^;]*)\\b');
+            if (xsrfTokenMatch) {
+              queryArgs['xsrf'] = xsrfTokenMatch[1];
+            }
+            */
+            getOAuth2URLMutation.mutate(queryArgs, {
+                onSuccess: authUrl => {
+                    if (authUrl) {
+                        addIAMProviderAuthorizationURL(iamProvider.name, authUrl);
+                    }
+                    else {
+                        console.error(`Failed to get the Login URL from Datalayer IAM for provider ${iamProvider.name}.`);
+                    }
+                },
+            });
+        };
+        if (!iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name]) {
+            initIAMProvider(IAMProvidersSpecs.GitHub);
+        }
+        if (!iamProvidersAuthorizationURL[IAMProvidersSpecs.LinkedIn.name]) {
+            initIAMProvider(IAMProvidersSpecs.LinkedIn);
+        }
+    }, [iamRunUrl, iamProvidersAuthorizationURL, addIAMProviderAuthorizationURL]);
+    useEffect(() => {
+        if (externalToken) {
+            setLoadingWithToken(1);
+            loginAndNavigate(externalToken, logout, checkIAMToken, navigate, homeRoute)
+                .catch(error => {
+                console.debug('Failed to login with token from cookie..', error);
+                enqueueToast('Failed to check authentication.', { variant: 'error' });
+            })
+                .finally(() => {
+                setLoadingWithToken(-1);
+            });
+        }
+    }, [externalToken]);
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            submit();
+        }
+    };
+    const handleHandleChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            handle: event.target.value,
+        }));
+    };
+    const handlePasswordChange = (event) => {
+        setFormValues(prevFormValues => ({
+            ...prevFormValues,
+            password: event.target.value,
+        }));
+    };
+    const submit = async () => {
+        if (loading ||
+            validationResult.handle !== '' ||
+            validationResult.password !== '') {
+            return;
+        }
+        setLoading(true);
+        loginMutation.mutate({
+            handle: formValues.handle,
+            password: formValues.password,
+        }, {
+            onSuccess: (resp) => {
+                if (resp.success) {
+                    setValidationResult({ handle: '', password: '' });
+                    const user = asUser(resp.user);
+                    const token = resp.token;
+                    setLogin(user, token);
+                    navigate(homeRoute);
+                }
+                else {
+                    enqueueToast('Failed to login. Check your username and password.', {
+                        variant: 'warning',
+                    });
+                    setValidationResult({
+                        handle: '',
+                        password: 'Invalid credentials',
+                    });
+                    console.debug(`Failed to login: ${resp.message}`, resp.errors ?? '');
+                }
+            },
+            onSettled: () => {
+                setLoading(false);
+            },
+        });
+    };
+    useEffect(() => {
+        setValidationResult({
+            ...validationResult,
+            handle: formValues.handle === undefined
+                ? undefined
+                : validateLength(formValues.handle, 1)
+                    ? ''
+                    : 'Your username may not be empty.',
+            password: formValues.password === undefined
+                ? undefined
+                : validateLength(formValues.password, 1)
+                    ? ''
+                    : 'Your password may not be empty.',
+        });
+    }, [formValues]);
+    return (_jsxs(PageLayout, { containerWidth: "medium", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsx(Heading, { children: heading || 'Login to Datalayer' }) }), _jsx(PageLayout.Content, { children: loadingWithToken < 0 ? (_jsx(_Fragment, { children: _jsxs(Box, { display: "flex", children: [showEmailLogin && (_jsxs(Box, { sx: { label: { marginTop: 2 }, paddingRight: '10%' }, children: [_jsx(Box, { mt: 5, children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your username" }), _jsx(TextInput, { autoFocus: true, placeholder: "Your username", value: formValues.handle, onChange: handleHandleChange, onKeyDown: handleKeyDown }), validationResult.handle && (_jsx(FormControl.Validation, { variant: validationResult.handle ? 'error' : 'success', children: validationResult.handle }))] }) }), _jsx(Box, { children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your password" }), _jsx(TextInput, { placeholder: "Your password", type: passwordVisibility ? 'text' : 'password', value: formValues.password, onChange: handlePasswordChange, onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => {
+                                                            setPasswordVisibility(!passwordVisibility);
+                                                        }, icon: passwordVisibility ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisibility
+                                                            ? 'Hide password'
+                                                            : 'Show password', sx: { color: 'var(--fgColor-muted)' } }), sx: { overflow: 'visible' } }), validationResult.password && (_jsx(FormControl.Validation, { variant: validationResult.password ? 'error' : 'success', children: validationResult.password }))] }) }), _jsxs(Box, { mt: 5, children: [_jsx(Button, { variant: "primary", disabled: loading ||
+                                                    validationResult.handle !== '' ||
+                                                    validationResult.password !== '', onClick: submit, children: loading
+                                                    ? 'Login…'
+                                                    : heading
+                                                        ? 'Login with Datalayer'
+                                                        : 'Login' }), _jsx(Box, { pt: 6 }), _jsx(Link, { href: "https://datalayer.app/password", target: "_blank", children: "Forgot password?" })] })] })), _jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", sx: { margin: 'auto' }, children: [showGitHubLogin &&
+                                            iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name] && (_jsx(Button, { leadingVisual: MarkGithubIcon, href: iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name], as: "a", style: { margin: '10px 0' }, children: "Login with GitHub" })), showTokenLogin && (_jsx(LoginToken, { homeRoute: homeRoute, style: { margin: '10px 0' } }))] }) })] }) })) : loadingWithToken ? (_jsx(CenteredSpinner, { message: "Checking authentication\u2026" })) : (_jsx(_Fragment, {})) })] }));
+};
+export default Login;