Authentication 

Authentication is a crucial aspect of modern application development that involves the process of verifying and validating the identity of users or services accessing an application. It ensures that only authenticated users gain access to protected resources and features, safeguarding sensitive data and maintaining system security.

Traditionally implementing authentication can be a complex and time-consuming task. Developers often have to deal with several challenges, including integration with different Oauth providers, security concerns and more.

Gadget simplifies this process by providing a seamless integration with various OAuth providers (like Google, Shopify), eliminating the need for developers to handle the intricacies of different authentication mechanisms.

Quickstart 

Authentication in Gadget is powered through the @gadgetinc/auth package.

In your Gadget app within the routes folder is the +auth.js file, which is a built-in registered plugin for supporting authentication out-of-the-box in your app.

routes/+auth.js
JavaScript
1import { Auth } from "@gadgetinc/auth";
2import { api } from "gadget-server";
3

4export default function (server) {
5  server.register(Auth, {
6    gadgetManagedCredentials: true,
7    api,
8    providers: [
9      {
10        type: "google",
11        clientId: process.env.GOOGLE_CLIENT_ID ?? "",
12        clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? "",
13        scopes: ["email", "profile"],
14        callbackPath: "/auth/google/callback",
15        redirectTo: "/",
16      },
17    ],
18    signInPath: "/",
19    redirectToSignIn: true,
20  });
21}

Plugin configuration

All fields except callbackPath are required within the file. However you have various options to configure certain fields to your apps authentication flow preferences.

  • gadgetManagedCredentials - Gadget will manage your OAuth credentials to avoid you needing to set up initially. Defaults to true, in production it should be set to false
  • api - your Gadget api client
  • redirectToSignIn - if a user is not signed in using the preValidation check, then it redirects the user to the path specified by signInPath. Defaults to false
  • callbackPath - this path should not be changed and will be relative to your application's environment. If you are not using Gadget-managed credentials this path, relative to your environment's domain, will need to be configured in your Google OAuth client allowed redirect URIs.
  • signInPath - the path to your login page. This is where users will be redirected to if redirectToSignIn is set to true. Defaults to /signin
  • providers - an array of authentication providers
    • type - currently the only available type is "google"
    • clientId - Google OAuth client id
    • clientSecret - Google OAuth client secret
    • scopes - optional OAuth scopes to request from the user. Defaults to ["email", "profile"] for Google

Helpers 

The process of building and managing authentication flows can be intricate and time-consuming, diverting developers attention from core functionalities. To address this challenge, Gadget offers a comprehensive set of authentication helpers, including hooks, components, and custom actions, specifically designed to streamline the authentication process. These authentication helpers encapsulate complex authentication logic, simplify user authentication, and ensure a smooth and secure user experience.

For more information, see the authentication helpers guide.

Auth workflows 

Developers often need to build around the various pathways through which users are verified and granted access to your application, within Gadget this can be easily done using our custom hooks and components.

For more information, see the auth workflows guide

Providers 

Currently, Gadget supports 2 providers (Google and Shopify) at the moment, with more to come in the future.

Google OAuth 

Gadget provides OAuth integration directly with Google, allowing you to authenticate users using their Google accounts for your application. By default, new Gadget apps include Google OAuth that makes use of the gadgetManagedCredentials. In production, you have to get your own credentials from the Google Cloud Console and set them up in Gadget.

For more information, see the building with Google OAuth guide.

Shopify OAuth 

Gadget handles the OAuth process for merchants installing your application out of the box. To use the supported Shopify OAuth you must connect your Gadget app to Shopify.

For more information, see the Shopify OAuth guide.