@aptly-as/sso-login-react

SSO react helpers for login window

Install

yarn add @ludens-reklame/ludens-sso-react

Spawn window

Spawn new window in center of screen to login. onLogin should set local state before ending function. On onLogin return the window will close.

import * as React from 'react;
import { useSSOLogin } from '@ludens-reklame/ludens-sso-react';

function Login() {
    const onLogin = React.useCallback(async () => {
      // Fetch user data
      // Set state
      // And redirect
    }, []);

    const loginOpts = React.useMemo(() => ({
        apiUrl: `${API_URL}/auth/sso`,
        callbackPath: '/login/callback',
        locale: 'no' | 'en',
        autoLogin: true | false
    }), [])  
    
    const { openLogin } = useSSOLogin({
         onLogin,
         loginOpts
     });
    
    return <button onClick={openLogin}>Login</button>
}

Spawn Iframe

Spawn iframe of SSO to login.

import * as React from 'react;
import { useSSOLogin } from '@ludens-reklame/ludens-sso-react';

function Login() {    
    const { Iframe } = useSSOLogin({ onLogin, loginOpts });
    
    return <Iframe />
}

Callback

Callback path for window or iframe.

import * as React from 'react;
import { useSSOCallback } from '@ludens-reklame/ludens-sso-react';

// /login/callback react path
function LoginCallback() {
    const callback = useSSOCallback();
    React.useEffect(callback);
    return null;
}

Props

export interface UseSSOLoginProps {
  apiLoginUrl?: string;
  onLogin?: any;
  windowSpecs?: WindowSpecs;
}

https://www.w3schools.com/jsref/met_win_open.asp
interface WindowSpecs {
  channelmode?: 1 | 0 | 'yes' | 'no';
  directories?: 1 | 0 | 'yes' | 'no';
  fullScreen?: 1 | 0 | 'yes' | 'no';
  resizable?: 1 | 0 | 'yes' | 'no';
  scrollbars?: 1 | 0 | 'yes' | 'no';
  location?: 1 | 0 | 'yes' | 'no';
  menuBar?: 1 | 0 | 'yes' | 'no';
  status?: 1 | 0 | 'yes' | 'no';
  titlebar?: 1 | 0 | 'yes' | 'no';
  toolBar?: 1 | 0 | 'yes' | 'no';
  width?: number;
  height?: number;
  top?: number;
  left?: number;
}

https://www.w3schools.com/jsref/met_win_open.asp