Login And Registration System

How could i make a Login And Registration System?
(3 days max?)


1 Like

So, there are a bagillion ways you could implement one. I like using Firebase Auth, but some people use other platforms or even write their own. With Firebase Auth, here’s a tutorial I guess:

  1. login to Google
  2. go to console.firebase.google.com
  3. Create project and name it and give it an ID
  4. Press Continue
  5. Tick off Google Analytics and press Create Project
  6. Wait and then press Continue
  7. Press the Web icon that looks like this: image
  8. Give it a nickname (the nickname doesn’t matter, nobody will see it)
  9. Register app
  10. Press “Use a <script> tag” and copy that code
  11. Continue to console
  12. On the left side, press the Build dropdown and select Authentication.
  13. Press Get started
  14. Hit Add New Provider and select email and password.
  15. Tick on the first enable option and press Save
  16. Onto the coding!
  17. In your HTML, paste that code block from earlier.
  18. You’re going to want to copy that line that says import {initializeApp} etc. and paste it down again.
  19. On the second line that you just pasted, change initializeApp to getAuth and firebase-app.js to firebase-auth.js. This will basically import the authentication modules.
  20. You’ll want to make a variable using getAuth. Add this line to the bottom of your code block (still inside the script tag, by the way): const auth = getAuth();
  21. You can import the functions createUserWithEmailAndPassword, signInWithEmailAndPassword, and even the signOut function.
  22. You can do that by changing the line with import {getAuth} from etc. etc., to import {getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut} from etc. etc.
  23. To use createUserWithEmailAndPassword, it’s used like this: createUserWithEmailAndPassword(auth, "email@example.com", "password123"). You can pipe the value property of your textboxes into those spots to make it sign up based on what they typed.
  24. To use signInWithEmailAndPassword, it’s the same as createUserWithEmailAndPassword.
  25. To use signOut, simply type signOut(auth). If you want to detect when it’s successfully signed the user out, you can throw on a .then and display a message or something:
signOut(auth).then(() => {
    alert("Signed out successfully")
  1. You can add your whole code block to every page and adapt it to each page (create user on register page, sign in user on login page, and even sign out on your navigation bar/menu). Keep in mind that since this is a module script, the functions can only be accessed inside that script block. If you tried to access, say, signOut, from another one of your scripts, it would just error.

Hope this helps!! It took me a very long time to write lol.

1 Like