README

Nuxt3 UAL (Universal Authenticator library & Renderer)

Module for Nuxt3 Universal Authenticator & Renderer

This project is still under heavy development; a lot will change, so lock your versions of you don't want to be surprises

🚀 Setup

Install

$ yarn add nuxt3-ual

add the following to your nuxt.config.ts

export default defineNuxtConfig({
    ...
    modules: ['nuxt3-ual/module'],
    ual: {
        appName: 'App name',
        chainId: 'Chain ID',
        rpcEndpoints: ['https://wax.endpoint.com:443'],
    },
    publicRuntimeConfig: {
        // Will be available on both server and client
        APP_NAME: 'App name',
        CHAIN_ID: 'Chain ID',
        RPC_ENDPOINTS: ['https://wax.endpoint.com:443'],
    },
    ...
});

add some beautiful code in app.vue or a layout

import { Anchor } from 'ual-anchor';

const { $ual } = useNuxtApp();
const config = useRuntimeConfig();

let anchor;
let ual;

onMounted(() => {
    // issue with Anchor fetch provider
    (window as any).global = window;

    const rpcEndpoints = config.RPC_ENDPOINTS.map((endpoint) => {
        const [protocol, hostWithPort] = endpoint.split('://');
        const [host, port] = hostWithPort.split(':');

        return {
            protocol,
            host,
            port: +port,
        };
    });

    const network = {
        chainId: config.CHAIN_ID,
        rpcEndpoints,
    };

    anchor = new Anchor([network], { appName: config.APP_NAME });

    ual = $ual([anchor], setUser);

    ual.value.init();
});

// Callback when user is logged in
const setUser = (users) => {
    localStorage.setItem('ual-session-account-name', users[0].accountName);
};

🚧 Development

Supported commands

    # Install packages
    $ yarn
    # Compile code and copy over files
    $ yarn build
    # Run playground and update packages
    $ yarn play

🦞 Misc

Code with <3

Discord, GitHub, Twitter

@nefty/nuxt-ual

Usage no npm install needed!