User authentication

[Limeload]

Step 1: Set Up Firebase

1. Create a Firebase project:

   • Go to the Firebase Console (https://console.firebase.google.com/).
   • Click "Add Project" and follow the prompts to create a new project.

2. Set up Firebase Authentication:

   • In the Firebase Console, navigate to "Authentication" from the left menu.
   • Click "Set up sign-in method" and enable the authentication providers you want to use (e.g., Google, Email/Password).

3. Get Firebase Configuration:

   • In the Firebase Console, go to Project Settings (gear icon) > General.
   • Scroll down to the "Your apps" section and click "Config" to reveal your Firebase configuration object.

Step 2: Frontend Integration

1. Install the Firebase SDK in your Vue.js frontend:

   npm install firebase

2. Set up Firebase in your Vue.js app:

   • Create a firebase.js file in your src directory.
   • Paste the Firebase configuration object from Step 1:

     import firebase from 'firebase/app';
     import 'firebase/auth';
     
     const firebaseConfig = {
       apiKey: "YOUR_API_KEY",
       authDomain: "YOUR_AUTH_DOMAIN",
       projectId: "YOUR_PROJECT_ID",
       storageBucket: "YOUR_STORAGE_BUCKET",
       messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
       appId: "YOUR_APP_ID"
     };
     
     firebase.initializeApp(firebaseConfig);
     const auth = firebase.auth();
     
     export { firebase, auth };

3. Use Firebase Authentication in your Vue components:

   • Import auth from your firebase.js file and use it to manage authentication state, sign-in, sign-out, etc.

Step 3: Backend Integration

1. Secure Backend Endpoints (Optional):
   • If your backend has APIs that require authentication, you can implement middleware to verify Firebase tokens.

Step 4: User Experience

1. Design and implement user registration and login interfaces in your Vue.js app.

2. Use Firebase authentication methods to register and sign in users.

Step 5: Testing and Deployment

1. Test user authentication thoroughly to ensure it's working as expected.

2. Deploy your Vue.js frontend and Node.js backend to your hosting provider.

[Irishwolf13]

Hard for me to review this one, as I'm not up to speed on vue. As far as I can tell, code looks good.

[dlardo]

There are 1800+ files here. Do we really need to vendor our dependencies?
If you feel strongly about it, please put those files in another PR and keep this one to only the code we created.

[Limeload]

There are 1800+ files here. Do we really need to vendor our dependencies?
If you feel strongly about it, please put those files in another PR and keep this one to only the code we created.

@dlardo Resolved

[dlardo]

Left you some things to consider

[dlardo]

If horizontal scalability isn't a goal then I would keep the data local. Redis is going to add additional complexity without adding any benefit.

[dlardo]

I would consider putting this into a config file or an environment variable.

[dlardo]

I would consider going only with Google (or other Oauth providers). Building and maintaining code, and protecting personal information and passwords is a lot of responsibility and effort. "Google says this is a person" is probably good enough for this app's needs.

[dlardo]

This is probably fine for this project but in general you don't want to commit apiKeys, they are your app's passwords. I would consider putting this in a config file and reading the API key from it. Typically teams will use a shared secret manager like Lastpass, or use something like https://pwpush.com/ to send the secret around.

[dlardo]

Consider rewriting this block so it's flatter (more left aligned). The else statements are almost always next(); so following the code would be better if you had a flow similar to this:

if (!auth) { go auth() };
if (!bogusUrl) { go fish() }
if (some other things that could go wrong...)

// Happy path
next();