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
  • Introduction
  • Getting started
  • Creating a tenant
  • Creating Application
  • Additional customizations
  • Creating a Database
  • Choosing different login options

Was this helpful?

  1. Reference

Setting up Auth0

PreviousBF Server ProxyNextCreate an S3 Bucket on AWS

Last updated 8 months ago

Was this helpful?

Introduction

Auth0 is an authentication and authorization platform that can be integrated with BetterForms to handle sign ups and logins to apps. Here we’ll explain what is needed to be set up on Auth0 to have it ready to be integrated with your app.

Getting started

Creating a tenant

If you already have a tenant to be used, you can skip to the next section.

After signing in to your Auth0 account, on the top left corner click on the dropdown button and select Create tenant

Choose a domain, region and environment for this tenant.

Creating Application

On the left bar, mouse over it and click the Applications option, then click on + Create Application

Choose a name to identify your app, select Regular Web Applications and click on Create.

Additional customizations

Still under the Settings tab, you can add a logo that will be used on the default pages used by Auth0 (Login, Reset Password, etc.).

A link from an asset uploaded to BF could be used here.

The following image shows other options that could be customized according to your policies.

Add your Dev and Production Domains

Allowed Callback URLs

This URL will be used by Auth0 to redirect the user back to your BF app, and the value should be as follows:

https://yourapp.domain.com/oauth/auth0/callback

If multiple domains are being used, multiple domains can be added using comma as the separator.

https://yourapp1.domain.com/oauth/auth0/callback, https://yourapp2.domain.com/oauth/auth0/callback

Creating a Database

This is where your user records will be saved to.

From the left bar choose Authentication → Database. On the page, select + Create DB Connection.

Choose a name to identify your database and a few initial setups, as needed.

If users are required to follow a specific password policy, that can be set under the tab Password Policy of your database.

Under Applications you can verify which applications are connected to that database.

Choosing different login options

Social Connections

Different external providers like Google, Facebook and Github, can be added as login options for your app. These options can be found under Authentication → Social. And new options can be added by clicking on + Create Connection.

In order to setup these external providers, make sure you have the necessary credentials for this. It will be usually a Client ID and Client Secret, or API and Secret keys.

Username and password (Auth0)

As already mentioned above, you can link apps to users database under Authentication → Database. Another option is to navigate to your application (on Auth0), and under the Connections tab you will be able to individually toggle the options you want to have enabled for that specific application. By selecting a database connection, it will allow users registered on that database to login to your application using the username and password created under Auth0.

Creating new BF Users

Using Auth0 in an iFrame

You will need to change:

Settings / Branding / Set to Classic

Mitigations - Disable Clickjacking protection

Configuring FM BetterForms

Be sure to only include the subdomain in the Subdomain field

Additional Notes

Logging out of Auth0

Sometimes you may need to force an Auth0 logout. An example is if a user uses the wrong social account to login to your app but that account is not registered.

 "logout": [{
        "action": "authLogout"
    }, {
        "action": "path",
        "function": "action.options.url = `https://visionarybar.us.auth0.com/v2/logout?client_id=xxxxxxxxxxxxxxx&returnTo=https://${window.location.host}`",
        "options": {
            "sameWindow": true,
            "url": "/"
        }
    }]

The client_id comes from the Auth0 dashboard page.

Once it’s created, it should redirect to your app’s Quick Start tab. Go to the Settings tab of your application and fill the under Application URIs.

In case the application will allow users to register using OAuth, an onBeforeRegistrationhook needs to be added to your business file, and it’s documented .

here
following fields
Untitled