Arcana Auth
Arcana SDK to perform logins on your app.
Installation
Using NPM/Yarn
npm install --save @arcana/auth
yarn add @arcana/auth
Using CDN
<script src="https://cdn.jsdelivr.net/npm/@arcana/auth"></script>
<script src="https://unpkg.com/@arcana/auth"></script>
Usage
Import
const { AuthProvider, SocialLoginType } = window.arcana.auth;
import { AuthProvider } from '@arcana/auth';
Initialise
const auth = await AuthProvider.init({
appId: `${appId}`,
flow: 'redirect',
redirectUri:''
});
Initiate social login
await auth.loginWithSocial(SocialLoginType.google);
Initiate passwordless login
const result = await auth.loginWithOtp(`${emailAddress}`, PasswordlessOptions);
PasswordlessOptions:
{ withUI: true }
- the user is redirected to email-sent
or error
page{ withUI: false }
- gets a json
response back with no redirection- defaults to
{ withUI: true }
Get login status
const loggedIn = auth.isLoggedIn();
The user info is saved in memory after successful login, before unload
event of the page it gets stored in session-storage
and is refetched to memory and removed from session-storage
after successful page reload.
Get user info
const userInfo = auth.getUserInfo();
Get public key
const publicKey = await auth.getPublicKey({
verifier: SocialLoginType.google,
id: `${email}`,
}, PublickeyOutput);
PublickeyOutput:
- value can be 'point', 'compressed' or 'uncompressed'
point
output will be an object with { x: string, y: string }
compressed
output will be a string
like 0x03...
uncompressed
output will be a string
like 0x04...
- defaults to
uncompressed
Clear login session
await auth.logout();
Typescript Usage
Exported enums
enum PublicKeyOutput {
point = 'point',
compressed = 'compressed',
uncompressed = 'uncompressed',
}
enum SocialLoginType {
google = 'google',
reddit = 'reddit',
discord = 'discord',
twitch = 'twitch',
github = 'github',
twitter = 'twitter',
passwordless = 'passwordless',
}
Exported types
interface InitParams {
appId: string;
network?: 'dev' | 'testnet';
flow?: 'popup' | 'redirect';
debug?: boolean;
}
interface UserInfo {
loginType: SocialLoginType;
userInfo: {
id: string;
email?: string;
name?: string;
picture?: string;
};
privateKey: string;
}
interface PasswordlessOptions {
withUI?: boolean;
}
Flow modes
Redirect
login.js
window.onload = async () => {
const auth = await AuthProvider.init({
appId: `${appId}`,
flow: 'redirect',
redirectUri:'path/to/redirect'
});
googleLoginBtn.addEventListener('click', async () => {
await auth.loginWithSocial(SocialLoginType.google);
});
}
redirect.js
window.onload = async () => {
const auth = await AuthProvider.init({
appId: `${appId}`,
flow: 'redirect',
redirectUri:'path/to/redirect'
});
if(auth.isLoggedIn()) {
const info = auth.getUserInfo();
}
}
-
Skip redirectUri
in params if the it is same as login page. For example:
index.js
window.onload = async () => {
const auth = await AuthProvider.init({
appId: `${appId}`,
flow: 'redirect',
});
if(auth.isLoggedIn()) {
const info = auth.getUserInfo();
} else {
googleLoginBtn.addEventListener('click', async () => {
await auth.loginWithSocial(SocialLoginType.google);
});
}
}
login.js
window.onload = async () => {
const auth = await AuthProvider.init({
appId: `${appId}`,
redirectUri:'path/to/redirect'
});
googleLoginBtn.addEventListener('click', async () => {
await auth.loginWithSocial(SocialLoginType.google);
if(auth.isLoggedIn()) {
const info = auth.getUserInfo();
}
});
}
redirect.js
window.onload = async () => {
AuthProvider.handleRedirectPage(<origin>);
};
Variables
SocialLoginType
- discord, twitter, github, google, twitch, redditorigin
- Base url of your app.