Accept logins from MitID, NemID, Swedish BankID, Norwegian BankID and other e-ID providers in your Javascript app with @criipto/auth-js.
npm install --save @criipto/auth-js
import CriiptoAuth from '@criipto/auth-js';
var criiptoAuth = new CriiptoAuth({
domain: '{YOUR_CRIIPTO_DOMAIN}',
clientID: '{YOUR_CRIIPTO_APPLICATION_ID}',
store: sessionStorage
});
criiptoAuth.popup.authorize({
width: 300,
height: 400,
redirectUri: 'http://localhost:8000/example/popup-callback.html',
acrValues: 'urn:grn:authn:dk:mitid:substantial'
});
criiptoAuth.redirect.authorize({
redirectUri: 'http://localhost:8000/example/index.html',
acrValues: 'urn:grn:authn:dk:mitid:substantial'
});var criiptoAuth = new CriiptoAuth({
domain: '{YOUR_CRIIPTO_DOMAIN}',
clientID: '{YOUR_CRIIPTO_APPLICATION_ID}',
store: sessionStorage
});
var criiptoAuth = new CriiptoAuth({
domain: '{YOUR_CRIIPTO_DOMAIN}',
clientID: '{YOUR_CRIIPTO_APPLICATION_ID}',
store: sessionStorage,
redirectUri: 'http://localhost:8000/example/index.html',
acrValues: 'urn:grn:authn:dk:mitid:substantial'
});Parameters:
- domain (required, string): The domain which your Criipto Application belongs to, such as
example.criipto.id. - clientID (required, string): The Client ID/realm for your Criipto Application.
- additional authorization parameters: See Authorization parameters
All authorization methods like criiptoAuth.popup.authorize, criiptoAuth.redirect.authorize and criiptoAuth.authorizeResponsive take a set of authorization parameters. These authorization parameters can also be provided by default via the CriiptoAuth constructor.
- redirectUri (string): The URL where Criipto will call back to with the result of a successful or failed authentication. It must be whitelisted in the "Callback URLs" in your Criipto application settings.
- acrValues (string): What EID to use for authentication, such as
urn:grn:authn:dk:mitid:substantial, a list of acceptable values can be found athttps://{YOUR_CRIIPTO_DOMAIN}/.well-known/openid-configuration
criiptoAuth.authorizeResponsive({
'(min-width: 768px)': {
via: 'popup',
redirectUri: 'http://localhost:8000/example/popup-callback.html',
acrValues: 'urn:grn:authn:dk:mitid:substantial',
width: 320,
height: 460
},
'(max-width: 767px)': {
via: 'redirect',
redirectUri: 'http://localhost:8000/example/index.html',
acrValues: 'urn:grn:authn:dk:mitid:substantial'
}
});Provides a convenient way to pick authorization method (popup or redirect) based on a CSS media query (screen size).
- {[mediaQuery: string]: {via: 'popup' | 'redirect', Authorization parameters}}
const response = await criiptoAuth.popup.authorize({
width: 300,
height: 400,
redirectUri: 'http://localhost:8000/example/popup-callback.html',
acrValues: 'urn:grn:authn:dk:mitid:substantial',
/** Using a random state is helpful,
* if your users are able to
* trigger new popups while a request
* is still pending */
state: Math.random().toString()
});
console.log(response.id_token, response.claims);- width (optional, number): Width of the popup.
- height (optional, number): Height of the popup
- Authorization parameters
criiptoAuth.redirect.authorize({
redirectUri: 'http://localhost:8000/example/index.html',
acrValues: 'urn:grn:authn:dk:mitid:substantial'
});Redirects the users browser tab to the authorization url. After authorization the user will be redirected back to the provided redirectUri.
const match = await criiptoAuth.redirect.match();
console.log(match.code);
console.log(match.id_token, match.claims);Returns an object with a code or id_token key if present in the window.location search (query params) or hash.
If you have SSO enabled for your domain and you are not using prompt=login you can use logout() to clear the users SSO session.
criiptoAuth.logout({
redirectUri: 'http://localhost:8000/example/index.html',
});criiptoAuth.qr.authorize(document.getElementById('qr_code_div', {
acrValues: 'urn:grn:authn:dk:mitid:substantial',
}).then(session => {
// onAcknowledged is executed when the QR code is first scanned
session.onAcknowledged = () => {
console.log('Session acknowledged.');
};
return session.then(result => {
console.log(result.id_token ?? result.code);
});
}).catch(error => {
console.error(`${error.error}: ${error.error_description}`);
});A canvas with a QR code will be rendered inside the target element. The user can scan the QR code and then complete the Criipto login flow on their phone, however the result will end up in the initating browser (usually a desktop browser).
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent