LogoLogo
  • Adapptio User Documentation
  • Getting Started
    • Quickstart
    • Architecture Overview
      • Views
      • Actions
      • Integrations
      • API Endpoints
      • Routes
      • Events
      • Assets
    • Editor
      • Main Menu
        • Create New Resources
        • Manage the Application
        • Monitoring Errors
      • Main Toolbar
        • Deploying the Application
        • Opening the Application
        • Preview Mode
        • Error Monitor
      • Components Panel
        • Components
        • Inspector
        • View Settings
      • Outline Panel
        • Data Variables
          • State Variable
          • Data From Action
      • Data Explorer
      • Console
    • Playground
  • Working with Adapptio
    • Best Practices
    • Tutorials
      • 1. Hello World
      • 2. Visualize Data from API
      • 3. Advanced Layout Application
      • 4. Application with In-Memory Database
    • How To
      • Custom Auth
      • Action Logic
        • Transform Node
      • UI Logic
        • Logout
        • Conditional Render
        • One Of
      • Data & Dynamic values
        • Custom Variable
        • Data from Action
        • Dynamic Value
        • Change Value from Event
        • Loading Data from Action to Form
        • Sending Data to Action from a Form
        • Server-side Dropdown Autocompletion
      • Visual
        • Styling Icon Button
      • Layouts
        • Centered Box
        • Header & Sidebar Layout
        • Grid Form Layout
        • Stretched Layout in Row
    • Components
      • Composed Chart
      • Advanced Table
      • Custom Component
    • Examples of Applications
      • SaaS Platforms
      • Customers Portals
      • Information Systems
      • Internal Tools
        • Color Picker
      • IoT Applications
      • Smart Portals
      • Analytics & Calculators
      • Statistics & Monitoring Panels
      • API Data Visualization
      • Simple Games
  • DEPLOYMENT
    • Cloud Hosted
    • Self Hosted
  • REFERENCE GUIDE
    • Components List
      • Application Header
      • Box
      • Container
      • Grid
      • Sidebar Layout
      • View
      • Text Input
      • Number
      • Checkbox
      • Option
      • Date and Time
      • File Upload
    • Properties
      • ACCEPT
      • CUSTOM PLACEHOLDER
      • DESCRIPTION
      • ENABLED
      • FONT SIZE
      • FOREGROUND COLOR
      • FORM DATA KEY
      • HEADERS
      • ICON
      • ID
      • LABEL
      • METHOD
      • MULTIPLE
      • MAX FILE SIZE
      • REQUEST TIMEOUT
      • REQUIRED
      • READ-ONLY
      • SIZE
      • TEXT ALIGNMENT
      • TEXT STYLE
      • URL
      • UPLOAD IMMEDIATELY
      • VALIDATE
      • VALUE
    • Functions
      • Array
      • Date
      • Generators
      • JSON
      • Logic
      • Math
      • Object
      • String
      • Types
      • Util
  • Support
    • Get in touch
    • Release Notes
  • Legal
    • Terms and Conditions
    • GDPR
Powered by GitBook
On this page
  • Integration
  • Actions
  • Login
  • Logout
  • GetAccount
  • Change Auth type to Custom
  • Views
  • Login

Was this helpful?

  1. Working with Adapptio
  2. How To

Custom Auth

Custom users authentication against own authority using a JWT token as Bearer authentication.

PreviousHow ToNextAction Logic

Last updated 2 years ago

Was this helpful?

Adapptio allows you to set your own authorization process and manage the users yourself. There are several steps you need to do.

  1. Create integration to your authority backend

  2. Add actions for login, logout and getting current user profile

  3. Change Auth type in App Configuration

  4. Setup login page

Integration

Add integration to your authority backend, it will be a REST API or a GraphQL in most cases.

Actions

Login

First it is important to disable authenticated user check for this action.

Add parameters acording to your API specification, probably a username and a password.

  • username / email (settings: string, required)

  • password (settings: password, required)

Then add the node with a request to your integration, name it login, set the URL to your endpoint and link together input parameters with body parameters (depending on your specification).

Do not forgot to switch fx mode for setting values dynamically.

Next add Set session node and store received token as the user identity, again it depends how the previous endpoint returns token.

And the last step is to add the Login node and connect all together. Entire flow would look like this:

Logout

The logout action is very simple, just add the Logout node, connect it and save.

GetAccount

You have to turn off authenticated user again - the same way as you did in the Login action.

Then add a request to your API to obtain user's profile. Set Bearer authorization and link it with the session's identityKey where the JWT token is stored.

session.identityKey now you can use in any other API requests to authorize user.

And finaly set output to your account data.

Change Auth type to Custom

Open the app configuration from main menu and change AuthType to Custom. There are two actions to set.

  1. The first one is Login action which allows you auto-login in editor. You can add your previously created Login action and set your testing credentials. This will automatically login when you start editor. It won't have any effect in the application.

  2. The second one is action to get current user, here you should select GetAccount action.

Save the configuration and wait until the editor backend will be restarted. Reopen the editor and move to creation Login view.

Remeber, that every save of application configuration will cause restarting editor backend.

Views

Check if the main contains OneOf switching between MainView and auth views - the Login page in our case.

Login

Create view Login and design it as on the previous image. Add two fields for email and password and button to finish login.

Do not forgot to turn off authenticated user in View Settings.

Select button and open OnClick event, where add nodes as on the picture below. In the Call Action node choose the Login action and bind parameters to the fields, then you need to reload session and navigate to Home (or where you want to). In case of login failure you can notice user with toast message, for instace.

And that's it, you just have set up your custom auth flow authenticating users against your backend instead of Adapptio.