Userauth - an open source user authentication and authorization project for Wappler

Coffee Lounge
#1

Hi all, I wanted to share something I’ve built in Wappler and made open source (MIT License).

I’m a developer that builds web apps for private clients. Wappler has been the backbone of my development workflow for the last 12 months. Along the way I’ve built various tools to accelerate my app development. I figured some of these tools would be useful for others and so am in the process of packaging them up for sharing (some for free, some commercially). Recently, I built a set of reusable user authentication screens and endpoints, which I’ve utilized in several projects. I’ve made this project open source, in the hope that others may use it and potentially contribute back to it.

I’ve called the project ‘userauth’ and here’s some of the capability it offers:

  • Login screen
  • Register screen
  • Password change screen
  • Password reset screen
  • Administrator management screen (just a basic one at the moment)
  • Optional mail sending for user registration and password resets
  • Optional reCAPTCHA for all input forms
  • Logging of all authentication activity
  • Automated (and secure) set up of database tables on first attempted login

It uses the MIT License which means you’re free to do whatever you want with it: https://tldrlegal.com/license/mit-license

Here’s a video tutorial that shows how to set it up: https://youtu.be/tFGXziLDf2I

Here’s the GitHub repo, you can also raise bugs and features here: https://github.com/impress-dev/userauth

Info:

  • It still needs a lot of testing, so expect to find bugs (though please do report them via GitHub)
  • The install & update scripts have only been tested on a Mac
  • There’s no release branching strategy, this means there could be breaking updates in the future should things like database tables need tweaking. If anyone can suggest a good (and easy) branching strategy that would work nicely while still maintaining a user-friendly approach with the install/update scripts then I’m listening
  • You are welcome to contribute to the project should you have the time & desire
  • If a better alternative to this already exists then let me know and I’ll swap to using the better one

If you have any questions, then feel free to ask.

26 Likes
User Registration/Login/Password/Profile Page
Authentication + The Basics
Wappler March 2023 Meetup
#2

That’s cool, Nice Video.

Did I detect a Welsh accent in there ?

1 Like
#3

Noice!

Cool usage of git submodules.

I see you have a lot of AC JS libraries being called in the content pages that are probably not in use. I assume they come from the live project you extracted the pages from.

#4

This is great, @scottclee! I’ve thought about doing something similar. I think this was one of the most helpful parts of platforms like Bubble to speed up initial development and having similar starter Wappler modules/plugins could be helpful for many that are getting started.

#5

@scalaris Yup, Wales born and bred. Though living in London now.

@JonL I use a tool to generate the UI and layout pages. At the moment it just includes all dependencies. I have a todo item to selectively include dependencies.

@kfawcett You’ve hit the key words: “to speed up initial development”. When I’m building an app I just want to get going with the app functionality. Unfortunately, you can’t really do that without having capability like authentication in place. That was my motivation in getting userauth built and shared.

2 Likes
#7

Diolch yn fawr

Great resource and instructions; I’m sure it will be a HUGE time-saver for new projects! :beers:

#8

Probably own’t have a use for it as I only work on a single project. But nonetheless thank you for sharing! Looks amazing, and interestingto see how you’ve approached creating a different type of extension for Wappler. Because that’s how you can install it, right? In an existing project?

#9

Yup, you can install it into an existing project or a new project.

#10

@scottclee Thanks for taking the time to do this, great to have you at the Zoom meeting today. I’ll be trying this out when I get some spare time, I’m coming from a Windows server environment and using MariaDB / MySQL so I’ll post back any bugs/improvements (if any are needed!)…

3 Likes
#11

This is wonderful! I was actually taking a peek to see how you handled migrations, but turns out you didn’t implement it yet as cited above

I’m guessing this would involve checking the date of the latest migration file in the project, and then prefixing the current date while copying the migrations from GitHub. So, e.g.:

20220526011737_userauth_make_email_column_unique.js

Becomes in the target project:

20230328031433_20220526011737_userauth_make_email_column_unique.js

The date coming from the file in GitHub’s repository is preserved, so the script can check which migrations need to be copied (so you don’t copy already-existing migrations twice in case of updates)

P.S.: This is actually a very exciting project, because it could be the foundation of a different kind of Wappler “extensions” - ready-to-install packages (e.g.: server actions) to add functionality to existing apps, but I’m afraid this might be a distant reality due to the freedom (lack of standard structure) while developing Wappler apps

1 Like
#12

Thanks, this is good suggestion. At the moment I use pgAdmin for my db admin, but at some point I’ll take a look at the migration capability that Wappler provides.

#13

I just started a new project and thought I would take advantage of this. I am getting the following error:

{
“status”: “500”,
“code”: “42601”,
“message”: “CREATE TABLE IF NOT EXISTS users\n(\n id serial PRIMARY KEY,\n\tusername TEXT,\n\tpassword TEXT,\n\tstatus TEXT,\n\tcreated TIMESTAMP,\n\tupdated TIMESTAMP\n); - syntax error at or near “NOT””,
“stack”: “error: CREATE TABLE IF NOT EXISTS users\n(\n id serial PRIMARY KEY,\n\tusername TEXT,\n\tpassword TEXT,\n\tstatus TEXT,\n\tcreated TIMESTAMP,\n\tupdated TIMESTAMP\n); - syntax error at or near “NOT”\n at Parser.parseErrorMessage (/Applications/Wappler.app/Contents/Resources/app/node_modules/pg-protocol/dist/parser.js:287:98)\n at Parser.handlePacket (/Applications/Wappler.app/Contents/Resources/app/node_modules/pg-protocol/dist/parser.js:126:29)\n at Parser.parse (/Applications/Wappler.app/Contents/Resources/app/node_modules/pg-protocol/dist/parser.js:39:38)\n at Socket. (/Applications/Wappler.app/Contents/Resources/app/node_modules/pg-protocol/dist/index.js:11:42)\n at Socket.emit (node:events:390:28)\n at addChunk (node:internal/streams/readable:315:12)\n at readableAddChunk (node:internal/streams/readable:289:9)\n at Socket.Readable.push (node:internal/streams/readable:228:10)\n at TCP.onStreamRead (node:internal/stream_base_commons:199:23)”
}

#14

Hi Scott, what database are you using?

#15

Postgres

Screenshot by Dropbox Capture

#16

Looks like it might be an issue with Wappler and a remote Postgres Database or something. I removed the database connection and re-added it but the existing tables are not showing. I see a red exclamation point next to database and Tables.

Screenshot by Dropbox Capture
Screenshot by Dropbox Capture1260×518 124 KB

I do not typically use Postgres, I have always used MySQL, so I will need some assistance or spend some time googling.

#17

Hmmm, I’ve not seen this before. Is this an existing project? If so, perhaps try a clean project connecting to your database.

I was going to suggest running the failing SQL manually, but it looks like there might be a separate issue causing the problem and not the SQL.

I’ve pasted it here anyways:
CREATE TABLE IF NOT EXISTS users(id serial PRIMARY KEY, username TEXT, password TEXT, status TEXT, created TIMESTAMP, updated TIMESTAMP);

#18

I appreciate the help @scottclee. After googling it appears that version that is provided by my host provider is a lower version and that is might be causing the issue. Even running the sql manually caused issues, it did not like the NOT.

Screenshot by Dropbox Capture
Screenshot by Dropbox Capture926×373 34.4 KB

#19

The IF NOT EXISTS is a safety precaution. The code actually drops the table in the step before. So the IF NOT EXISTS can be removed if necessary to support earlier versions of Postgres.

#20

That database version is 10 years old and no longer supported. Can’t you update the database server to a more recent version, at least version 11 or higher.

#21

Sadly no, that is what NameCheap provides. I switched to them because DreamHost only provides Nodejs version 12 and a higher version is required to use Wappler.

It is ok, I can use mySQL as my database and create everything manually. :slight_smile: