FM BetterForms
BF Editorfmbetterforms.com
master
master
  • Introduction
  • 🏆Features
  • Getting Started
    • Welcome to FM BetterForms!
    • System Overview
    • Quick Tour of the BetterForms IDE
    • Phase 1: Setting Up Your Foundation
      • 1.1 Configure FileMaker Server
      • 1.2 Install BetterForms Helper File
      • 1.3 Add Your Server to BetterForms (IDE)
    • Phase 2: Building Your First Application
      • 2.1 Create an App (Site) in the IDE
      • 2.2 Create Your First Page (Intro to Page Builder)
      • 2.3 Understanding & Managing Environments (IDE)
      • 2.4 Adding Elements to Your Page
      • 2.5 Understanding Validation
      • 2.6 Adding Actions to Your Page
      • 2.7 Creating Your First List View
      • 2.8 Understanding Page Data Flow
      • 2.9 Creating Your First Hook
      • 2.10 Working with Data Tables (Coming Soon)
    • Phase 3: Understanding Core BetterForms Concepts
      • 3.1 Introduction to Hooks (and where to find them in the IDE)
      • 3.2 Running Your First Hook (Practical Example)
      • 3.3 Introduction to Actions & Action Scripts (IDE Context)
      • 3.4 Understanding the Data Model (and Page Data Model UI)
    • Phase 4: Common Customizations & Expanding Your App
      • 4.1 Adding & Configuring Buttons (Page Builder)
      • 4.2 Implementing Page Navigation (Actions & Site Navigation UI)
      • 4.3 Displaying Data in Tables (Page Builder & Element Config)
      • 4.4 Basic App Styling (Site Styling UI)
    • Phase 5: Mastering the BetterForms Environment & Advancing Your Skills
      • 5.1 Understanding & Managing Environments (In-Depth)
      • 5.2 Deep Dive: Page Configuration & Settings
        • Navigating the Page Builder Interface
        • Working with Page-Level Action Scripts
        • Configuring the Page Data Model
        • Page Integration Settings Explained
        • Managing Page Info & Other Settings
      • 5.3 Working with Global Scripts
      • 5.4 Managing App (Site) Settings & Navigation
      • 5.5 Exploring Further: What to Learn Next
    • Support & Resources
      • Getting Help
      • Learning JSON
  • Reference
    • Site Settings
      • Navigation
      • App Model
      • DOM Header Insertions
      • Global Named Actions
      • Site Structure
      • Slots / Code Injection
    • Page Settings
      • Data Model
      • Card / Window Modals
      • Validation
        • Custom Validators
      • Misc Page Settings
    • Page Elements
      • Copy of Site Structure
      • BetterForms Elements
        • Checkbox
        • Checklist
        • Cleave.js Input Masking
        • DateTime Picker
        • Google Address Autocomplete
        • Image Display Element
        • Input
        • Masked Input
        • Range Slider (noUiSlider)
        • Radios
        • Select
        • Advanced Select (selectEx)
        • TextArea
      • Common
        • Input
        • Button
        • Data Table
        • HTML
      • Grouping Elements
        • Tabs
        • Panel
        • accordion
        • accordion2
        • listrows
      • Uploading Files
        • dropzone
        • dropzone to S3
        • uploadCare
        • 🏗️Uppy File Upload Widget Integration with AWS S3
      • Misc Elements
        • Plain Text / Code Editor
        • signature
        • fullCalendar
        • rangeSlider
      • Payment Gateways
        • Authorize.net
        • PayPal
        • Stripe
      • Adding Custom Page Elements
    • Actions Processor
      • Named Actions (Action Scripts)
      • Actions
        • runUtilityHook
        • path
        • debounce
        • throttle
        • showAlert
        • showModal / hideModal
        • function
        • clipboard
        • cookie
        • setFocus
        • scrollTo
        • wait
        • emit
        • validate
        • channelJoinAnon
        • channelLeaveAnon
        • messageSend
        • messageSendAnonChannel
        • consoleError
        • showStripeCheckout
      • Authentication Actions
    • Script Hooks
      • Globals Variables
        • $$BF_Model
        • $$BF_App
        • $$BF_State
      • Keeping Keys Private
      • Reducing Payload Size
      • API Callback Endpoint
      • Common Hooks
      • Scoped Hooks
    • Users & Authentication
      • Managing User Accounts
      • Custom Login Pages
      • OAuth
    • Advanced Configuration
      • Custom Domains
    • BF Utility Functions
      • Example Usage
        • BF.i18n()
    • BF Error Codes
    • Messaging
      • Adding users to channels
      • Removing users from channels
      • Sending messages
      • Get connected users
      • Get active channels
    • Practices for File Downloads
    • BF Streaming Proxy
    • Updating the Helper File
    • Connection Trouble Shooting Guide
    • Software Testing Overview
    • JavaScript Libraries
    • FM BetterForms - Quality Assurance
    • Rollbacks and Version Control
    • BF Server Proxy
    • Setting up Auth0
    • Create an S3 Bucket on AWS
    • ApexCharts - Getting started
    • BF Enterprise Documentation
    • BetterForms Error Pages API
    • BF Streaming API
    • Creating a PWA
  • Usage Tips
    • Troubleshooting
      • Debugging
      • Frozen Actions Queue
      • Vue Variables
    • JavaScript Tips
      • Calling Named Actions from HTML Vue Events
      • Calculations
    • Hacking a Webpage
    • System Overview
    • Forms Processor
      • Form Types
      • HTML & VueJS
      • Styling and Design
    • Customizing and Styling
      • Custom CSS
      • Custom Components
        • Components Editor
        • Component Best Practices
      • Page Pre-loaders
      • Favicon
    • Design Patterns and Best Practices
      • Working with environments
      • Handling Data
      • Saving Data
      • Data Optimization
      • Business Logic
      • UI / UX
      • Debugging
      • Script Engine Optimization
    • Getting Started
    • Installation
  • Security
    • Authentication
    • Security White Paper
    • Firewalls
    • Technology Stack
  • Compatibility
Powered by GitBook
On this page
  • Pre-requisites
  • Setting up
  • Add domain to allowed callback URLs
  • Save Credentials
  • Helper File
  • Before Registration Hook - Business File
  • New Callback Landing Page
  • Login Page

Was this helpful?

  1. Reference
  2. Users & Authentication

OAuth

Oauth authentication is the protocol that allow users to login to your application using external provider credentials, such as Google, Auth0 or Okta.

PreviousCustom Login PagesNextAdvanced Configuration

Last updated 4 months ago

Was this helpful?

Pre-requisites

In order to use OAuth make sure you have the following information from the external provider that will be used.

  • Client ID;

  • Secret Key;

  • Subdomain.

Here are the links for each provider documentation: , and .

In addition, apps need to be running version BetterForms 2.0.12+ (bf-staging, as of May 2023).

Setting up

Add domain to allowed callback URLs

Go to provider's admin console and add your domain as an Allowed Callback URLs, as following.

https://your.domain.com/oauth/providerName/callback
//Where providerName can be set as: google, auth0 or okta

Save Credentials

Select the app where OAuth will be added, click on the ellipsis besides the App name and select App Settings.

Under Authentication, toggle the button Enable 3rd Party Authentication.

Select one of the 3 providers from the dropdown menu, enter Client ID, Client Secret and Subdomain (Scope still not implemented).

Whenever an information from above is changed, the Client Secret always need to be reinserted.

Subdomain values vary from provider to provider:

Provider
Domain
Subdomain

Google

myClientID.apps.googleusercontent.com

N/A

Auth0

mySubdomain.region.auth0.com

mySubdomain.region

Okta

mySubdomain.okta.com

mySubdomain

No subdomain value is needed for Google, and Auth0 domain doesn't always have a region in it.

Helper File

A new field oauthId needs to be created in the Users table.

Remember to add the ouahtId field to the layout.

Before Registration Hook - Business File

A before registration hook script can be used to the business file if you want to control whether a user is allowed to register or not.

The script needs to be called onBeforeRegistration, and by setting createUser to true on $$BF_Model will allow users to register to your app via OAuth.

If onBeforeRegistration hook script is not created and/or createUser not set to true, users will not be allowed to register via OAuth.

Updating your Common hooks to support `onBeforeRegistration`

if your integration is older, you may not have a onBeforeRegistration hook installed.

Update the BF Common Dispatch Script

Users registered via OAuth workflow are automatically verified, so there’s no need to send verification emails.

New Callback Landing Page

This page is a new page that needs to be added to the app. Once the user is authenticated with the external user, the request will be redirected to this page, where the JWT token will be generated by calling the action presented below.

Navigation slug

The callback lading page must use auth/oauth as its navigation slug.

Add action to onFormLoad

In your new callback landing page, add the following actions to your onFormLoad:

"onFormLoad": [{
            "action": "authLoginOauth"
        }]

If the external provider or internal code returns an error, the error will return as a query parameter errorMessage , be added to default model.authMessage key, as well as a console log message.

Note for early OAuth users: the OAuth action used to be oauthLoginHook , and as shown above, it changed to authLoginOauth. However, both actions will be supported at the moment.

Login Page

Button or Link

Add a button or link that redirects to one the following paths

Provider
Provider

Google

/oauth/google

Auth0

/oauth/auth0

Okta

/oauth/okta

For example, if we were to add Google to our app:

//Button in Page Schema
{
  "actions": [{
       "action": "namedAction",
       "name": "loginGoogle"
  }],
  "buttonClasses": "btn btn-info",
  "styleClasses": "col-md-2",
  "text": "Sign in with Google",
  "type": "button"
}

//Named Action in Page Info
"loginGoogle": [{
            "action": "path",
            "options": {
                "sameWindow": true,
                "url": "/oauth/google"
            }
        }]

Redirects can be performed by adding a redirect query param to the URL. You can also pass things like id 's which will appear in the onBeforeRegistrationscript in the $$BF_Queryvariable.

//This is just an example, multiple params can be passed as needed
//Named Action in Page Info
"loginGoogle": [{
            "action": "path",
            "options": {
                "sameWindow": true,
                "url": "/oauth/google?redirect=%2Fdashboard&token=123-123-123-123"
            }
        }]

Google
Auth0
Okta
add an onBefore Registration script as shown