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

© NeftyBlocks 2021