mblair415 / mean-auth-satellizer

[angular, mean, satellizer]

MEAN Auth Microblog with Satellizer

Objectives

• Implement sign up and login with Satellizer for an Angular front end.
• Investigate Express code that generates and interprets JWTs on an Express back end.

Workflow

You should be pair programming the entire time you work on these challenges. That means you're using ONE computer at a time, and ONLY the "driver" is allowed to type (you'll switch roles throughout the lab).

Resources

Satellizer Docs

Angular $q Promise Docs

App Setup

1. Whoever is going to be the "driver" first should fork this repo, and clone it on their local machine. The "navigator" must not fork or clone and must close their computer. (Note: This initail "navigator" should fork after the pair is finished working together on the lab.)

2. Once you're in your app directory, run npm install to install the required node_modules.

3. In one Terminal window, run mongod, and in another, run nodemon.

4. Navigate to localhost:9000 in the browser. You should see an empty page and an angry red error message in the Chrome console.

5. BEFORE WRITING ANY CODE, open up models/user.js, resources/auth.js, and server.js. The driver should go through these files in order and explain what you think each code block and/or function does. Write comments into the code, and add and commit them to the repo.

6. Now it's the navigator's turn to explain code! Open up index.hbs and app.js, and go through the same exercise. Note that this Express back end uses server-side handlebars templating. Again, write and commit comments.

7. Next, the driver should add a "dot" file, called .env to the root directory. Add this line to the file:

TOKEN_SECRET=yoursupersecrettoken

This is the secret your server will use to encode the JWT token for each user.

8. Secrets should never be checked into GitHub, so note that this .env file is already in the .gitignore. The dotenv gem is handling making this secret into an environment variable. Find where the TOKEN_SECRET variable is used in the project code.

9. Before hooking up the front-end, test your server routes via Postman:

• Send a GET request to /api/me. You should see the message: "Please make sure your request has an Authorization header."
• Send a POST request to /auth/signup with a test email and password. You should see a token that was generated by the server. (You are simulating a form submission, so make sure to use x-www-form-urlencoded and send your data in the body of the request).
• Send a POST request to /auth/login with the email and password you just used to create a new user. You should again see a token that was generated by the server.

Satellizer

Add, commit, and push your team's changes. At this point, the "driver" should add the "navigator" as a collaborator on their version of the repo. It's time to switch drivers! The new driver should clone their partner's forked version of the repo. The new navigator must close their computer.

1. Re-add the .env file. The .env file contains secret keys and tokens, that's why we .gitignore it! We don't ever want our application secrets exposed on github, so you have to setup the file on each machine!

2. Now it's time to implement authentication from the client. First, you need to include Satellizer in your Angular app:

• Add the Satellizer CDN to index.hbs (TODO #1).
• Add the Satellizer module to your Angular app in app.js (TODO #2).
• Check that you can navigate between your routes (/, /signup, /login, and /profile).

3. Follow the instructions to finish implementing Account.login() (TODO #3, #4, #5).

4. Click the "Log Out" link to logout (TODO #6) and make sure it redirects to /login (TODO #7).

   Todo #6 Spoiler:

   ```js return ( $auth .logout() // delete token https://github.com/sahat/satellizer#authlogout .then(function() { self.user = null; }) ) ```

5. The current driver should add and commit their changes, and push their work up to GitHub. Switch drivers.

6. The new driver should pick up where their partner left off by implementing the functionality outlined in Account.signup() (TODO #8, #9, #10).

7. At this point, you should be able to sign up a user, log them in, and view their profile page from the client.

User Settings

1. It's time to switch drivers again! The current driver should add, commit, and push, and the new driver should pull down the changes.

2. Add a username field to the Sign Up form, and add the username attribute to User model (server-side). Sign up a new user with a username (TODO #11, #12).

3. On the user profile page, make a form to edit the user's details. The form should initially be hidden, and when the user clicks a button or link to "Edit Profile", the form should show (Hint: ng-show) (TODO #13).

4. When the user submits the form, it should call a function in the ProfileCtrl (Hint: ng-submit). The function should send an $http.put request to /api/me. Verify that this works. (TODO #14)

5. Bonus: Decouple the edit form from the user's other details. For instance, when I type into the edit form it shouldn't instantly change my email or my username, but it should still change those values on (a successful) submit!

Nested Resources: Posts (TODO #15)

No more TODOs! You're on your own from here on out!

1. Switch drivers. Add, commit, and push, then the new driver should pull.

2. Create a form on the homepage for the user to add a blog-post (that's right - you're turning your Angular app into a microblog). The blog-post form should have input (title) and textarea (content) fields. Hint: Use ng-model.

3. Only show the form if there is a currentUser logged in.

4. Use the ng-submit directive to run a function called createPost when the user submits the form.

5. createPost should make an $http.post request to /api/posts (which isn't defined on the server yet!) with the vm.post object.

6. The next step is to implement posts on the server. First, create a Mongoose model Post (models/post.js).

7. A user should have many posts, so add an attribute to the User model called posts that references the Post model:

/*
 * models/user.js
 */

 var userSchema = new Schema({
   ...
   posts: [{ type: Schema.Types.ObjectId, ref: 'Post' }]
 });

8. In server.js, define two new API routes:

• GET /api/posts should retrieve all the posts from the database.
• POST /api/posts should create a new post that belongs to the current user (Hint: Use the auth.ensureAuthenticated function in the route to find the current user).

9. Refresh localhost:3000 in the browser. Make sure you have a user logged in, and try to create a new post. Check the Chrome developer tools to make sure it's working.

Finishing Touches

Switch drivers one last time:

1. Validate blog-posts! Ensure a user can't submit an empty title or content. (Use both backend AND frontend validations).

2. On the user's profile page, display the number of posts the user has written. Hint: You'll need to add .populate('posts') to your GET /api/me route in server.js.

3. On the user profile page, the "Joined" date isn't formatted very nicely. Use Angular's built-in date filter to display the date in this format: January 25, 2016.