SkillWallet Auth

This is a custom HTML tag (Web Component) for your application to import a SkillWallet authorization flow for your users.

Getting Started

To integrate your community into this auth flow, just copy/paste the Partner Key you received from https://partners.skillwallet.id/integrate into an HTML attribute in your skillwallet tag like so:

<skillwallet-auth partner-key="<your-key>"></skillwallet-auth>

Then follow the below steps for your particular Javascript environment:

React:

In your project directory enter the following terminal command:

npm i @skill-wallet/auth

Copy this line into your index.js file's imports:

import { defineCustomElements } from "@skill-wallet/auth/loader";

Add this to the last line of your index.js:

defineCustomElements(window);

Add our custom HTML tag to any component you'd like...no imports!

<skillwallet-auth></skillwallet-auth>

Next.JS:

Note that for a server-side rendered app, your custom element(s) cannot be defined until your browser window's been defined (after your app's been compiled and built):

In your project directory enter the following terminal command:

npm i @skill-wallet/auth

Copy this line into your index.js file (or wherever you're going to use our HTML tag) imports -- note that you cannot import & define custom elements in _app or _document files:

import { defineCustomElements } from "@skill-wallet/auth/loader";

In the same file, add this line inside a componentDidMount() or useEffect() hook - to wait and render our element AFTER creating the DOM:

defineCustomElements(window);

Add our custom HTML tag to any component you'd like...no imports!

<skillwallet-auth></skillwallet-auth>

Angular

In your project directory enter the following terminal command:

npm i @skill-wallet/auth

Add custom_elements_schema to NgModule in your app.module.ts file:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
{
...schemas: [CUSTOM_ELEMENTS_SCHEMA] }

Add the following to your main.ts file:

import { applyPolyfills, defineCustomElements } from '@skill-wallet/auth/loader';

  applyPolyfills().then(() => {
    defineCustomElements(window);
  })

Add our custom HTML tag to any component you'd like...no imports!

<skillwallet-auth></skillwallet-auth>

*Tested with angular-cli (latest version 12.2.7)

Vue.js

In your project directory enter the following terminal command:

npm i @skill-wallet/auth

Add the following to your main.js file:

import { applyPolyfills, defineCustomElements } from '../node_modules/@skill-wallet/auth/loader';

// Tell Vue to ignore all components defined in the test-components
// package. The regex matches a word at the beginning of a string on most regex flavors (in these flavors \w matches the opposite of \W)
Vue.config.ignoredElements = [/^\w/];

// Bind the custom elements to the window object
applyPolyfills().then(() => {
  defineCustomElements();
});

Add our custom HTML tag to any component you'd like...no imports!

<skillwallet-auth partner-key="<your-key>"></skillwallet-auth>

HTML

For any vanilla HTML/CSS/Javascript project, you can import the NPM pack straight through your document header via a <script> tag using the open-source CDN JSDelivr:

    <script type="module">
        import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@skill-wallet/auth@0.0.52-alpha/loader/index.es2017.js";
        defineCustomElements();
    </script>

Add our custom HTML tag to any component you'd like...no imports!

<skillwallet-auth></skillwallet-auth>

Need help? Join our team Discord here.