Angular Auth Challenges

Challenges for Angular Auth lesson.

Objective: Implement Angular authentication with Satellizer. Your goal is to have working sign up and log in functionality.

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).

Satellizer Docs

App Setup

1. Whoever is going to be the "driver" first should fork this repo, and clone it into their develop folder on their local machine. The "navigator" must close their computer.

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:3000 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.

6. Now it's the navigator's turn to explain code! Open up index.hbs and app.js, and go through the same exercise.

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

TOKEN_SECRET=yoursupersecrettoken

This is the secret your server will use to encode the JWT token for each user. Make sure to restart your Node server after this step.

8. 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.
• 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

1. At this point, the "driver" should add the "navigator" as a collaborator on their forked version of the repo. No need to commit anything yet, since you haven't written any code. It's time to switch drivers! The new driver should clone their partner's forked version of the repo into their develop folder. The new navigator must close their computer.

2. The new driver should get setup with mongod and nodemon. You'll also need to create a .env file with the TOKEN_SECRET, and restart your Node server.

3. 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.
• Add the Satellizer module to your Angular app in app.js.
• Check that you can navigate between your routes (/, /signup, /login, and /profile).

4. Starting on line 35 of app.js, start following the instructions in comments to implement authentication with Satellizer. The current driver should implement $scope.isAuthenticated and $scope.logout.

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 the AuthCtrl and the ProfileCtrl.

7. At this point, you should be able to sign up a user, log them in, view their profile page, and log them out 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.

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).

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.

Nested Resources: Posts

1. Switch drivers - you know the drill - add, commit, and push, then the new driver should pull.

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

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

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

5. createPost should make an $http.post request to /api/posts (which isn't defined yet on the server) with the $scope.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

1. Switch drivers one last time.

2. Use ng-repeat to display a list of all posts on the homepage. Anyone should be able to see the list of posts, but only logged in users should be able to see the form to create a new post.

3. 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.

4. 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.