-
authgear-sdk-js
Authgear authentication SDK for Single Page Applications (SPA) and JavaScript websites
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
-
The implementation of authentication for SPA apps consists of two parts. In the first part, you create an Authgear app, choose a logging method and customize the sign-in UI page(optional). The second part covers the use of Authgear’s Web SDK to trigger authentication flow such as log-in, and log-out.
Follow the steps to create a simple SPA app and learn how to use Authgear Web SDK to integrate Authgear into your application. You can also view a full-source code on the GitHub repo.
To keep the demo simple, we do not use a package manager such as Webpack, we will retrieve the Authgear Web SDK from Authgear's CDN using IIFE(Immediately-invoked Function Expression) bundle. We can reference a script in our HTML directly:
In this part, you'll make a simple website server to host the SPA app using ExpressJS. We'll also use it to serve our HTML page and any assets it needs, like JavaScript, CSS, and so on. Start with making a new folder on your computer to keep the app’s source code (In the example, we call it authgear-spa-js-login). Then, initialize a new NPM project by running the following command: