Quick Start: Auth-Core
Arcana Auth-Core SDK offers limited Arcana Auth SDK functionality with additional flexibility in user onboarding customization!
Developers can use this SDK to assign keys to authenticated users to sign blockchain transactions securely.
Limited Auth Capabilities
- No built-in plug-and-play login UI feature
- No built-in Arcana wallet UI
- No support for Global keys, only app-specific keys (default) allowed.
- No enhanced wallet security via MFA or key recovery is supported when the user switches devices.
Prerequisites
Use latest SDKs
Use the latest Arcana Auth-Core SDK release: v2.0.0-alpha.3
1. Register & Configure
Log into the Arcana Developer Dashboard:
https://dashboard.arcana.network
In the Manage Apps dashboard screen, click the first card and create a new app entry to register app. Each app is assigned a unique Client ID at registration. The Client ID is required for integrating the app with the Arcana Auth SDK.
A default Testnet configuration profile is associated with the registered app. In the Manage Apps dashboard screen, select the registered app card and click 'Testnet' configuration settings. Choose Social Auth to configure user onboarding providers. Optionally enable gasless transactions in Arcana wallet to incentivize app users.
Wallet UI Mode Setting
The Wallet UI Mode Arcana Developer Dashboard configuration setting chosen by the developer during app registration is ignored for apps integrated with the Arcana Auth-Core SDK.
To use the Arcana Auth-Core SDK, developers must implement a custom wallet UI.
2. Install SDK
Install the auth-core
package:
npm install --save @arcana/auth-core
yarn add @arcana/auth-core
<script src="https://cdn.jsdelivr.net/npm/@arcana/auth-core"></script>
<script src="https://unpkg.com/@arcana/auth-core"></script>
3. Integrate
const { AuthProvider, SocialLoginType, CURVE } = window.arcana.auth_core;
// or
import { AuthProvider, CURVE } from '@arcana/auth-core';
The AuthProvider
is instantiated and initialized for a UI flow that redirects the user to a different app page after login.
const clientId = "xar_test_d24f70cd300823953dfa2a7f5b7c7c113356b1ad"; // obtained after app registration via dashboard
const auth = new AuthProvider({
curve: CURVE.ED25519, // defaults to CURVE.SECP256K1
appId: clientId,
redirectUri: '' /* can be ignored for redirect flow if same as login page */
});
Onboard Users
Use custom login UI and call social login and passwordless user onboarding functions provided by the Arcana Auth-Core SDK. Specify the providers configured through the dashboard in the SocialLoginType
.
Social Login
await auth.loginWithSocial(SocialLoginType.google);
Check SocialLoginType
details in the Exported Enums section.
Passwordless Login
First initiate passwordless login:
const result = await auth.loginWithPasswordlessStart({
email: 'abc@example.com'
});
Then, on the redirect page, handle passwordless login as follows:
await auth.handleRedirect();
Onboarding via Cognito, Firebase
Web3 apps that use Cognito or Firebase for onboarding users and require Arcana Auth-Core SDK to only assign cryptographic keys to the authenticated users are not supported in the current release.
Contact our support team if you need this feature.
Login Status
const loggedIn = auth.isLoggedIn(); /* boolean response */
Get User Info
After successful authentication, the user information is saved in memory. It gets copied in the current session storage before the page unload event. User information is fetched again to memory and removed from the session storage after a successful page reload.
const userInfo = auth.getUserInfo();
/*
UserInfo: {
loginType: 'google',
userInfo: {
id: 'abc@example.com',
name: 'ABC DEF',
email: '',
picture: ''
},
privateKey: ''
}
*/
For userInfo type details, see Exported Types.
Get Public Key
const publicKey = await auth.getPublicKey({
verifier: SocialLoginType.google,
id: `abc@example.com`,
});
Logout
await auth.logout();
Sign Transactions
The AuthProvider
is a standard Ethereum EIP-1193 provider. Apps integrated with the Arcana Auth-Core SDK can use this provider to allow authenticated users to sign blockchain transactions.
Add code to perform Web3 operations and sign blockchain transactions in the context of an authenticated user.
Developers must add a custom wallet UI and wire it to perform Web3 wallet and blockchain operations for the chains supported by the app. Note that the Arcana Auth-Core SDK does not provide any built-in login UI or Arcana wallet UI, unlike the Arcana Auth SDK.
import { AuthProvider, CURVE } from '@arcana/auth-core';
import { ethers } from 'ethers'
const auth = await AuthProvider.init({
appId: `${clientId}`, /* obtained after registering the app with the Arcana Developer Dashboard */
curve: CURVE.ED25519, // defaults to CURVE.SECP256K1
redirectUri:'SPECIFY_URI' /* can be ignored for redirect flow if same as login page */
});
...
const login = async () => {
const arcanaProvider = await auth.loginWithSocial(SocialLoginType.google);
if (auth.isLoggedIn()) {
const info = await auth.getUserInfo();
}
};
...
googleLoginBtn.addEventListener('click', () => {
login('google');
});
¯
...
try {
const provider = new ethers.providers.Web3Provider(arcanaProvider)
await provider.getBlockNumber() //Or perform any other Web3 operation such as sign message, send transaction
// 14983200
} catch (e) {
// log error
}
...
4. Deploy
Finally, deploy the app on Testnet (default). For Mainnet deployment, see Testnet > Mainnet Migration Guide.
That's all!
You've successfully integrated a Web3 app with the Arcana Auth-Core SDK.
See Also
sample-auth-core
submodule in Auth Examples- Arcana Auth-Core SDK Usage Guide
- Arcana Auth-Core SDK Reference Guide
Arcana Auth-Core SDK Quicklinks