npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

stacks-pravica-fork-auth-react-native

v1.3.0

Published

Authentication for Stacks apps.

Downloads

24

Readme

@stacks/auth

Construct and decode authentication requests for Stacks apps.

This package provides the auth logic used by the Stacks Connect library. If you're looking to integrate Stacks authentication into your web app, Stacks Connect provides a simple API and built-in user interface. See the authentication tutorial.

Installation

npm install @stacks/auth

Usage

Generating an authentication request

import { UserSession, makeAuthRequest, AppConfig } from '@stacks/auth'

The app domain is the URL to your website/app. This is how the Stacks authentication system identifies apps and determines what credentials to provide. Changing the app domain is equivalent to changing the app. Note that you also need to have a valid manifest.json file at the domain.

const appDomain = 'https://www.myapp.com';

Next we set the basic permissions for your app to read and store user data. If your app will allow users to share data with other users, you will need an additional publish_data permission. We will also initiate a UserSession object using the configuration.

const appConfig = new AppConfig(['store_write'], appDomain);
const userSession = new UserSession({ appConfig });

The authentication payloads are encrypted during transit, the encryption key generated below provides this

const transitKey = userSession.generateAndStoreTransitKey();

The Stacks auth process will open a compatible Stacks authenticator or browser extension to perform the authentication. So you will need to provide a redirect URL which the authenticator or extension can redirect to with the authentication payload. This page should process the authentication payload.

const redirectUri = 'https://www.myapp.com/auth';

Set the location of your app manifest file. This file contains information about your app that is shown to the user during authentication.

const manifestUri = 'https://www.myapp.com/manifest.json';

Finally generate the authentication request payload:

const authRequest = userSession.makeAuthRequest(
  transitKey,
  redirectUri,
  manifestUri
);

The resulting payload can now be passed to a compatible Stacks authenticator or browser extension. If you are using Stacks connect, this is performed automatically.

If you would like to implement a Stacks authenticator, check out the reference implementation of the Stacks browser extension.

Handling an authentication response payload

After an authenticator has processed your app's request, and the user has granted permission, the resulting response will be passed back to your app via the URL set in your redirectUri.

Below, we use userSession.isSignInPending to determine if there is an incoming authentication response. If detected, the userSession.handlePendingSignIn method will process the response and provide a userData object containing the user's identity, BNS username and profile information.

if (userSession.isSignInPending()) {
  userSession.handlePendingSignIn().then((userData) => {
    // Do something with userData
  });
}

Checking if the user is signed in

Use the userSession.isUserSignedIn method to check if the user is already authenticated. If so, we can retrieve the user's profile data using userSession.loadUserData.

if (userSession.isUserSignedIn()) {
  const userData = userSession.loadUserData();
}

Sign out

To sign the user out simply call the userSession.signUserOut method.

userSession.signUserOut();

Data encryption

Stacks authentication also provides an easy way to encrypt the user's data. If you are using the @stacks/storage package, encryption is automatically enabled. If you would like to perform encryption outside of storage you can use the userSession.encryptContent and userSession.decryptContent methods.

const message = 'My secret message';
const cipherText = await userSession.encryptContent(message);
const plainText = await userSession.decryptContent(cipherText);

Note that encryption here uses the user's private key associated with your app only. If you need to share this data with another app or other users, you should use the equivalent methods from @stacks/encryption and provide a custom private key.