@abm-labs/kit v0.5.15

ABM's Kit

This project provides reusable components that are often needed in React/Next projects (UI components, lib functions, etc.)

UI

Button

Link

Toggle

Tooltip

Select

Input

Modal (and useModal hook)

Auth

How to add Google Sign-In easily to a Next 13 project

Authentication is 100% cookie-based and uses iron-session under the hood. See the advantages and disadvantages of that.

Add google auth endpoint and logout API routes

NB: These routes are sending 307 redirections; they are not meant to be called via fetch, but for the user to be redirected to them. This fits in nicely with Link server components, without the need to use onClick, client-side buttons.

I. Add /pages/api/auth/google.ts

import { genApiLoginRoute } from '@abm-labs/kit/lib/esm/auth';

export default genApiLoginRoute({
    checkUser: async(user, payload) => {
        // User is of type SessionUser (see below)
        // And payload
    }
})

The checkUser hook gives you the opportunity to reject the user's login, even if they are probably auth'ed with Google. This enables you to restrict access to the app to a list of emails, a particular domain (amaravati.org) and so forth.

User is of type SessionUser:

export type SessionUser = {
  id: string;
  name: string;
  email: string;
  picture: string;
};

If you do not define it, it will simply sign in all users that are able to sign in via Google. If you use an Internal app on the Google Console, it will be restricted by default to amaravati.org email addresses. If authenticated routes are meant to be accessible to the entire community - in other words, to anyone having an amaravati.org account - then you can just leave this blank.

II. Add /pages/api/logout.ts

import { genApiLogoutRoute } from '@abm-labs/kit/lib/esm/auth';

export default genApiLogoutRoute({
    postLogoutRedirectUrl: '/your/custom/route' // optional, defaults to '/'
});

Create a login page with the Google Sign-In button

You can reuse our Login page component (Next 13+) which handles error codes and displays errors nicely.

Librairies

fetchJson

Errors

Use in a Next.js project

1. Add Tailwind and add this module's path in its configuration
2. Add our Tailwind plugin