Integrate Web Component
- 1.Select the market that fits best your platform.
- 2.Customize your community name, description, avatar, roles, and expected Commitment Level
- 3.Click Sign and Deploy!
- 4.Copy your partner's key to use when integrating the web component.
- 5.Customize your own SkillWallet to activate your community.
This Web Component is SkillWallet's decentralized, role-based authentication system.
It lets your users create an account, or login to your platform, in a fully decentralized way, while giving them a familiar (web2-like) experience.
Each user will add their nickname and avatar, and pick a Role in your Community - after doing that, they will join your community, and claim their universal ID.
When a user successfully logs in their SkillWallet information is stored in the 'Session Storage' with the Key 'skillWallet'.
This Web Component is cross-platform, and can be integrated on any Web framework.
In order to use it, though, you will need to have a Partner's Key - you can get deploy your role-based community on the Blockchain, and receive your Partner's Key directly on our Partners Dapp.
- 1.Install the library
npm i @skill-wallet/auth --save - 2.Import the initialization function in the App.js/tsx (or index.js/tsx)
import { InitSwAuth } from '@skill-wallet/auth'; - 3.Call the InitSwAuth function at the start of your project
InitSwAuth(); - 4.Add the custom HTML tag and populate the partner-key property
Example
import './App.css';
import { InitSwAuth } from '@skill-wallet/auth;
function App() {
return (
<div>
<sw-auth partner-key="f4b83b4c8151fa92acc372a08a78c50ad5cab41f"></sw-auth>
</div>
);
}
InitSwAuth();
export default App;
- 1.Install the library
npm i @skill-wallet/auth --save - 2.Import the initialization function in the app.component.ts
import { InitSwAuth } from '@skill-wallet/auth'; - 3.Call the InitSwAuth function inside ngOnInit
ngOnInit(): void { InitSwAuth(); } - 4.Add the CUSTOM_ELEMENTS_SCHEMA in your app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; - 5.Add the custom HTML tag and populate the partner-key property
Example
app.component.ts:
import { Component, OnInit } from '@angular/core';
import { InitSwAuth } from '@skill-wallet/auth';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
ngOnInit(): void {
InitSwAuth();
}
title = 'ngular-app';
}
app.module.ts:
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
app.component.ts:
...
<sw-auth
partner-key="your partner key here"></sw-auth>
...
- 1.Install the library
npm i @skill-wallet/auth --save - 2.Import the initialization function in the App.vue
import { InitSwAuth } from '@skill-wallet/auth'; - 3.Call the InitSwAuth function at the start of your project
InitSwAuth(); - 4.Add the custom HTML tag and populate the partner-key property
Example
App.vue:
<script setup>
import { InitSwAuth } from "@skill-wallet/auth";
InitSwAuth();
</script>
<template>
<div class="wrapper">
<sw-auth
partner-key="0904d77ea971c3aff9e1d46410ab1600d8537641"
use-dev="true"
id="root"
use-button-options="true"
></sw-auth>
</div>
</template>
<style>
...
</style>
You can override all the styles of the button and the dropdown by providing CSSObjects to the InitSwAuth function.
Here's the default button style as an override:
InitSwAuth({
buttonStyles: {
cursor: 'pointer',
background: '#000000',
'& .MuiTypography-root': {
textTransform: 'none',
fontSize: '14px',
lineHeight: '25px',
fontWeight: '500',
},
'& .swButtonAvatar': { width: '36px', height: '36px' },
boxShadow: 'rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px',
'&:hover': {
background: '#FFFFFF',
borderColor: '#000000',
'& .swButtonText': {
color: '#000000',
mt: '4px',
},
},
height: '47px',
width: '180px',
},
});
The optional dropdown (use-button-options) styles can also be overriden in the same way:
InitSwAuth({
dropdownStyles: {
'& .MuiMenu-list': {
padding: '0px',
},
'& .swButtonOption': {
cursor: 'pointer',
background: '#000000',
'& .swButtonOptionText': {
textTransform: 'none',
fontSize: '14px',
lineHeight: '25px',
fontWeight: '500',
},
'&:hover': {
background: '#FFFFFF',
borderColor: '#000000',
'& .swButtonOptionText': {
color: '#000000',
mt: '4px',
},
},
height: '40px',
width: '180px',
border: '0px',
},
boxShadow: 'rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px',
},
});
NOTE: Sometimes in order to achieve your desired style you might need to override Mui styles. You can see which styles you need to override by inspecting the web component and it's elements in your browser Developer Tools.- 1.
partner-keyThe key you are given after signing a Partner's Agreement - 2.
use-devSet to 'true' to use the 'Mumbai' TestNet - 3.
use-button-optionsIf set to 'true' a dropdown will pop up when hovering over the Button. Currently, the only option is 'Logout'.
- 1.
onSkillwalletLoginDispatched when the user has 'Logged in'. This means that their skillWallet has been successfully retrieved and stored in the session storage (key is skillWallet). - 2.
onSkillWalletActivatedDispatched when a SkillWallet is successfully activated. This happens after the QR Code is scanned from the mobile app. - 3.
initSkillwalletAuthDispatched after initialization - signifies that the web component has read the partner-key and is ready to use.
That's it! 🎉🎉🎉
Your users can now create their SkillWallets and log in directly in your platform!