Simple username:password protection for Heroku app

Help
,
1

I have a Heroku website where I have Auth0 as an add-on. I am only looking to secure the app for a few users while it is in development. Just simple username:password protection, with no registration. No new users.

For some reason, this simple implementation escapes me. The documentation and examples have kind of made this more complicated than it needs to be.

I am just unfamiliar with Auth0, and would love it if I could find some clear direction on how to do this, step by step.

Sorry for such a pedestrian question. But I suppose other people may benefit from the answer as well. Thanks!

3

Hi @dylannirvana,

Welcome to the Auth0 Community!

I understand that you need some guidance on configuring your Heroku App with the Auth0 add-on. I’d be happy to help.

First, could you please clarify what do you specifically need help with your configuration with Auth0?

I have found this related documentation from Heroku: https://devcenter.heroku.com/articles/auth0

And, could you please clarify which SDK you are using?

Thank you.

1 Like
4

Hey Rueben,
Thanks man, I do need a little help. I am completely unfamiliar with the Auth0 ecosystem. And as essentially a Front End Developer, I have to work a little harder understanding Back End systems (though often it turns out to be pretty straight forward).

The app is a single page website, static HTML in a React wrapper. A npx create-react-app application. I’m running on Heroku, and served Auth0 as an add-on mainly for security purposes: I just want to lock down the application to all but a handful of developers who are working on the project.

As a Heroku add-on, I am expecting a simple redirect to a sign in page. No registration. No new users. Basic and simple as it gets. Just don’t want to expose authentication client-side.

Auth0 documentation is so broad and robust, they don’t even deal with the possibility that a person just wants to clamp down access to a simple webpage.

Easy is so hard these days.
Dylan

5

Hi @dylannirvana,

Thank you for your response.

For starters, have you created a Single Page Application on your Auth0 Dashboard?

You can do this by going to your Auth0 Dashboard>Applications and clicking on Create Application and choosing Single Page Web Applications as your Application Type.

This will serve your Universal Login Page for your users.

Then, to make sure that sign-ups are disabled, navigate to your Username-Password-Authentication Database Connection in your Dashboard>Authentication>Database and switch on the Disable Sign Ups toggle.

Then proceed to create these Whitelisted users within that Database connection, and this will grant them access to the application.

After this is complete, you should have everything set up on the Auth0 side, and you can continue with the configuration for the Auth0 add-on on Heroku.

Please let me know if you have any further questions.

Thank you.

6

@rueben.tiow Thank you so much for your help.

There are two applications in there already: Auth0 Dashboard Backend Management Client and Default App. I think the first one is what is connected to Heroku. I went into this and designated it as a SPA.

Are you suggesting I create a third app?

Also, where would I create whitelisted users? I don’t see this in Database.

8

Hi @dylannirvana,

Thank you for your response.

That’s correct, there are already two applications there. However, to clarify, the API Explorer Application must be a Machine-to-Machine application type and generally left the way it is. It is used for the Auth0 Management API.

The Default App could be used and configured for your application, but I leave it alone because the Default App name is not very meaningful.

Instead, I recommend that you create a third application using the Create Application button, give your application a meaningful name, select Single Page Application as your application type and, press Create.

While you’re still in your new application, be sure to scroll down in the Settings to Allowed Callback URLs and Allowed Logout URLs and include the necessary callback URLs. See here for more details.

Once that is complete, you have completed the configuration for your Auth0 SPA Application.

Now, keep a note of the following properties:

  • Client ID
  • Client Secret
  • Domain
  • Allowed Callback URL

These values are needed to set up your configuration variables in your Heroku environment setup.

Now, to create your whitelisted users you can navigate to Dashboard>User Management>Users and press on the Create User button. From here, create those users individually, making sure the connection is set to the Username-Password-Authentication connection.

Double-check that the Username-Password-Authentication has Disable Sign Ups enabled. After doing so, you will have created an isolated Database for your users.

Lastly, you may not want to allow this DB connection to authenticate on other applications. To restrict access to only your new app, go to the Username-Password-Authentication connection > Applications and disable other applications.

I hope this helps! Please let me know how this works for you.

Thank you.

1 Like
9

@rueben.tiow
Hey I followed all the steps. I added http://localhost:3000 accordingly. All the credentials are correct. Added the wrapper code to src/index.js, (which says it will work by React context) with Auth0Provider. It doesn’t.

All I want to do is password protect a website hosted on Heroku. I don’t want login buttons, special routing. When someone navigates to the URL, I want them to be confronted with the Universal Login. If they are a whitelisted user, they get in.

I can’t believe how difficult this has been. This should be so simple. I don’t know where it is breaking down. The sample apps are so robust and overkill (and even after npm i do not compile anyway).

It would be brilliant if someone could shine the light on what I am missing here.
Thank you!

10

Hi @dylannirvana,

Thank you for your response.

Could you please clarify whether you have been ​following the Heroku Docs to set up your Heroku App with the Auth0 Add-on? https://devcenter.heroku.com/articles/auth0

There is no need to go as far as adding the wrapper code. That documentation was only to explain the purpose of the Allowed Callback URLs and Allowed Logout URLs. Based on Heroku’s docs, you only need to set up the application on the Auth0 side.

Which you should have done so if you

  1. Create an Auth0 app
  2. Add the Allowed Callback URLs and
  3. Added Allowed Logout URLs

You had to configure a few extra steps because you wanted no sign-ups and only allow a selected number of users access. This was accomplished by configuring the Username-Authentication-Password DB connection in Auth0.

After that, you will have to resume configuring on Heroku: https://devcenter.heroku.com/articles/auth0#local-setup.

That should be the extent of your configuration for Heroku with Auth0 as an Addon.

If you encounter any problems configuring on the Heroku with the Auth0 Addon, I recommend that you also contact Heroku Support as mentioned in their docs.

Thank you.

12

Previous message deleted due to SPAM reasons.

1 Like
13

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.