Vuelify Identity Functions

This package is built around the Netlify Identity GoTrue API. It is still in pre-release and not meant to be used in the wild yet. It possibly contains bugs and has zero tests, but the options API contract wont be broken without a major version upgrade if you like the bleeding edge.

The Netlify Identity API works fine, but fails when you want to create a SPA that doesn't store the user details/refresh token in local storage. For more ideas on how to set up this work flow and why it's important, check out this blog post

This package provides a wrapper for sign-in, sign-out, sign-up, verify-email & current-user. The refresh token is saved in a httpOnly cookie so it can't be accessed from the client side JavaScript.

Each endpoint returns a user object and a JWT token that you can save in memory, eg. vuex store.

Installation

npm i @vuelify/identity-functions express serverless-http

Set Up

// ~/functions/api/index.ts
// Initialize express to run as a serverless function

import { Handler } from "serverless-http";
import serverless from "serverless-http";
import { createApp } from "./createApp";

let handler: any;

const _handler: Handler = async (event, context) => {
  if (!handler) {
    const app = createApp();
    handler = serverless(app, {
      request: (request) => {
        request.serverless = { event, context };
      },
    });
  }

  const res = await handler(event, context);

  return res;
};

export { _handler as handler };

// ~/functions/api/createApp.ts

import express, { Request, Response } from "express";
import { createRouter } from "@vuelify/identity-functions";

// this function returns an expess router with the auth endpoints attached
const authRouter = createRouter({
  identityURL: "https://YOUR_APP_URL.netlify.app/.netlify/identity",
  password: {
    minLength: 5,
    maxLength: 72,
    notAllowed: ["testing123", "ilovekate"],
  },
  signIn: {
    // you can customize all of the endpoints like so
    path: "/log-in",
  },
});

// Remember that these `options.password` settings won't stop everyone creating an account with these PW sercurity measures
// if the person is savy enough to post directly to your identity endpoint
// having said that if they're smart enough to do that, theyre smart enough to know the risks of a dumb password.

export function createApp() {
  const app = express();

  // attach the router to your app
  app.use("/api/v1/auth", authRouter);

  // add your own endpoints
  app.get("/api/v1/some-other-route", (req, res) => {
    res.status(200).send({ someOtherData: true });
  });

  app.get("*", (req: Request, res: Response) => {
    res.status(404).send({ message: "endpoint not found" });
  });

  return app;
}

To save on serverless execution this package doens't include functionality for the following

• GET /settings
• POST /invite
• POST /recover
• PUT /user

These endpoints can be accessed via proxy in your netlify.toml file or directly via YOUR_APP_URL/.netlify/identity/:endPoint

For more info on this check out this repo

# netlify.toml

# this keeps your URLS cleaner, but notice the 'identity' segment after auth, without this, your functions with the /auth endpoint
# would never receive the request
[[redirects]]
  from = "/api/v1/auth/identity/*"
  to = "https://YOUR_APP_URL.netlify.app/.netlify/identity/:splat"
  status = 200

# this redirects all API traffic
[[redirects]]
  from = "/api/v1/*"
  to = "/.netlify/functions/api"
  status = 200

# used so your frontend knows where to serve requests
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

# this is the default dir for functions but is here for clarity
[functions]
  directory = "functions"

Maintenance & Bugs

All @vuelify packages follow semantic versioning. There will be no breaking changes to the options the package accepts. All the changes will happen under the hood. This package is still in pre-release and there is a good chance it contains bugs.

Use at your own risk :)

I will be actively maintaining this package. If you'd like to help out with that, submit a pull request. If you find a bug, open an issue and I'll get to it ASAP.

Foot Note

This package only works with Express & I have no intention of adding another framework any time soon.

It was designed to work best within the world of @vuelify and with typescript.