alp-node-auth

alp-node-auth

authentication with alp

Install

npm install --save alp-node-auth

What it does

• Provides route and controller to login user
• Provides extandable services and managers
• Provides authentication middleware: context.state.loggedInUserId and context.state.loggedInUser

How to use

config/local.yml

server:
  google:
    clientId: xxxx
    clientSecret: xxxx

models/user/usersManager.server.js

import MongoStore from "../../db/mongo";
import { UsersManager } from "alp-node-auth";

export default new UsersManager(new MongoStore("users"));

index.server.js

import Alp from 'alp-node';
import authInit from 'alp-node-auth';
import googleStrategy from 'alp-node-auth/strategies/google';
import * as loginModuleDescriptor from './modules/auth/login';
import usersManager from './models/user/usersManager.server';

const app = new Alp(...);

// config / init
const authMiddleware = authInit({
   controllers,
   usersManager,
   strategies: { google: googleStrategy(config) },
   loginModuleDescriptor,
})(app);

// middlewares
app.use(authMiddleware);

routerBuilder.js

import { routes as authRoutes } from "alp-node-auth";

export default function buildRouter(builder) {
  builder
    .add("home", "/", "home.index")
    .add(...authRoutes.login)
    .add(...authRoutes.logout)
    .addDefaultRoutes();
}

modules/auth/login/index.js

export const identifier = "login";
export View from "./LoginView";

modules/auth/login/LoginView.js

import { ReactNode } from 'react';
import { LoginButtons } from 'react-alp-login';
import Header from '../components/HeaderComponent';

export default (): ReactNode => (
  <div className="login-view">
    <Helmet title="Login" titleTemplate={`${title} - %s`} />
    <Header />
    <LoginButtons />
  </div>
);

modules/common/components/HeaderUserComponent.js

import { ReactNode } from 'react';
import Link from 'react-alp-link';
import User from 'react-alp-user';

  <User>
    {user => (
      user ? (
        <span className="dropdown">
          {user.displayName}
          <ul className="list links">
            <li>
              <Link to="logout" target="_self">Logout</Link>
            </li>
          </ul>
        </span>
      ) : (
        <div>
          <T id="header.login">{t => (
            <Link to="login" params={{ strategy: 'google' }} target="_self">{t}</Link>
          )}</T>
        </div>
      )
    )}
  </User>
);