Auth0

Auth0

💡
Follow this guide to get Auth0 setup in your Divjoy codebase. Click the ▶︎ icon next to any step to see a detailed walkthrough with screenshots. If anything is confusing please reach out.

Basic Setup

‣
Create a new Auth0 application with type "Single Page Web Applications".
Click the "Create Application" button in the top right
Click the "Create Application" button in the top right
Select "Single Page Web Applications" and then click the "Create" button.
Select "Single Page Web Applications" and then click the "Create" button.

‣
Go to your new app's settings, copy your "Domain" and "Client ID" values, and then update your codebase .env file.
After creating your new app switch to the "Settings" tab to see "Domain" and "Client ID"
After creating your new app switch to the "Settings" tab to see "Domain" and "Client ID"
‣
In your app's settings scroll to the bottom, click "Show Advanced Settings", go to the "Grant Types" tab, check the "Password" option, then click save.
Click the "Show Advanced Settings" link
Click the "Show Advanced Settings" link
Go to "Grant Types" tab, click the "Password" option, then save.
Go to "Grant Types" tab, click the "Password" option, then save.

‣
In your app settings add your dev and production domains to the "Allowed Web Origins" and "Allowed Origins (CORS)" sections. 
http://localhost:3000, https://mydomain.com
Add these URLs to the "Allowed Web Origins" section
Add these URLs to the "Allowed Web Origins" section
Also add the URLs to the "Allowed Origins (CORS)" section
Also add the URLs to the "Allowed Origins (CORS)" section
🙌
You should now have working email and password authentication in your web app.
image

Enable Account Updating

Follow these steps to enable users to be able to update their email and password from the account settings UI in your web app.

‣
Create a second Auth0 application with type "Machine to Machine Applications". This second Auth0 app is required for updating user info server-side. Auth0 doesn't allow authenticated users to update email and password client-side, so we give you a server-endpoint that handles that.
Click the "Create Application" button in the top right
Click the "Create Application" button in the top right
Select "Machine to Machine Applications" and then click the "Create" button.
Select "Machine to Machine Applications" and then click the "Create" button.
‣
In the "Authorize Machine to Machine Application" popup select "Auth0 Management API" and check the "update:users" scope.
Select "Auth0 Management API" in the top dropdown, select "update:users" scope, and then click "Authorize".
‣
Go to your new app's settings, copy your "Client ID", and "Client Secret" values, and then then update your codebase .env file (the keys start with AUTH0_MANAGEMENT_).
After creating your new app switch to the "Settings" tab to see "Client ID", and "Client Secret".
After creating your new app switch to the "Settings" tab to see "Client ID", and "Client Secret".
🕺
After signing into your web app you should now be able to update your email and password from the account settings page.

Enable Social Authentication

Follow these steps to enable users to sign in with social auth providers, such as Google, Facebook, Twitter, etc.

‣
In your app settings add these URLs to "Allowed Callback URLs". Replace "mydomain.com" with your actual production domain before going live.
http://localhost:3000/auth0-callback, 
https://mydomain.com/auth0-callback
Add these URLs to the "Allowed Callback URLs" section
Add these URLs to the "Allowed Callback URLs" section
‣
Enable the auth providers you want to use in Connections → Social. For each provider make sure to also enable that provider for your Auth0 app in the "Applications" tab of the popup.
Toggle on the auth providers you'd like to enable. Your Divjoy codebase supports Google, Facebook, Twitter, and Github out of the box.
Toggle on the auth providers you'd like to enable. Your Divjoy codebase supports Google, Facebook, Twitter, and Github out of the box.
In the settings window for each enabled auth provider to to the "Applications" tab and enable for your application.
In the settings window for each enabled auth provider to to the "Applications" tab and enable for your application.
‣
Auth0 will display an extra consent screen when users login that only makes sense in the context of enterprise apps. Disable this by going to APIs → Auth0 Management API → scroll to the bottom and enable "Allow Skipping User Consent".
Go to the APIs section and click "Auth0 Management API".
Go to the APIs section and click "Auth0 Management API".
Scroll to the bottom, enable "Allow Skipping User Consent", and click "Save".
Scroll to the bottom, enable "Allow Skipping User Consent", and click "Save".
  • If you want to use any other providers other than password, google, facebook, twitter, or github then you'll need to add them in your auth code. Follow this guide to do that.
😺
You should now be able to sign in to your web app with social auth providers.

Other

  • By default Auth0 has strict password rules (must be 8 or more chars, etc). You can adjust this in Dashboard → Connections → Database → Username-Password-Authentication → Password Policy.
  • Users will be asked to verify their email after signing up. You can customize the email template in Dashboard → Emails → Templates. Keep in mind you'll need to specify a provider for email sending before custom templates will work.
  • When a user requests to reset their password they will receive an email from Auth0 that takes them to an Auth0 hosted interface for changing their password. You can customize this email template in Dashboard → Emails → Templates.
  • By default, if a user attempts to signup with an existing account they will get a generic “Invalid signup” message. You can change this to the more understandable “User already exists” error message by toggling a setting in Auth0. Please see the Auth0 documentation on this.