freeCodeCamp
diff --git a/‎curriculum/challenges/chinese-traditional/blocks/advanced-node-and-express/5895f70bf9fc0f352b528e64.md
Lines changed: 73 additions & 0 deletions b/‎curriculum/challenges/chinese-traditional/blocks/advanced-node-and-express/5895f70bf9fc0f352b528e64.md
Lines changed: 73 additions & 0 deletions
diff --git a/‎curriculum/challenges/chinese-traditional/blocks/advanced-node-and-express/5895f70ef9fc0f352b528e6b.md
Lines changed: 47 additions & 0 deletions b/‎curriculum/challenges/chinese-traditional/blocks/advanced-node-and-express/5895f70ef9fc0f352b528e6b.md
Lines changed: 47 additions & 0 deletions
diff --git a/‎curriculum/challenges/chinese-traditional/blocks/advanced-node-and-express/589a69f5f9fc0f352b528e70.md
Lines changed: 99 additions & 0 deletions b/‎curriculum/challenges/chinese-traditional/blocks/advanced-node-and-express/589a69f5f9fc0f352b528e70.md
Lines changed: 99 additions & 0 deletions
diff --git a/‎curriculum/challenges/chinese-traditional/blocks/advanced-node-and-express/589a69f5f9fc0f352b528e71.md
Lines changed: 96 additions & 0 deletions b/‎curriculum/challenges/chinese-traditional/blocks/advanced-node-and-express/589a69f5f9fc0f352b528e71.md
Lines changed: 96 additions & 0 deletions
diff --git a/‎curriculum/challenges/chinese-traditional/blocks/advanced-node-and-express/589fc832f9fc0f352b528e78.md
Lines changed: 76 additions & 0 deletions b/‎curriculum/challenges/chinese-traditional/blocks/advanced-node-and-express/589fc832f9fc0f352b528e78.md
Lines changed: 76 additions & 0 deletions
@@ -0,0 +1,73 @@
+---
+id: 5895f70bf9fc0f352b528e64
+title: Use a Template Engine's Powers
+challengeType: 2
+forumTopicId: 301567
+dashedName: use-a-template-engines-powers
+---
+
+# --description--
+
+One of the greatest features of using a template engine is being able to pass variables from the server to the template file before rendering it to HTML.
+
+In your Pug file, you're able to use a variable by referencing the variable name as `#{variable_name}` inline with other text on an element or by using an equal sign on the element without a space such as `p=variable_name` which assigns the variable's value to the p element's text.
+
+Pug is all about using whitespace and tabs to show nested elements and cutting down on the amount of code needed to make a beautiful site.
+
+Take the following Pug code for example:
+
+```pug
+head
+  script(type='text/javascript').
+    if (foo) bar(1 + 5);
+body
+  if youAreUsingPug
+      p You are amazing
+    else
+      p Get on it!
+```
+
+The above yields the following HTML:
+
+```html
+<head>
+  <script type="text/javascript">
+    if (foo) bar(1 + 5);
+  </script>
+</head>
+<body>
+  <p>You are amazing</p>
+</body>
+```
+
+Your `index.pug` file included in your project, uses the variables `title` and `message`.
+
+Pass those from your server to the Pug file by adding an object as a second argument to your `res.render` call with the variables and their values. Give the `title` a value of `Hello` and `message` a value of `Please log in`.
+
+It should look like:
+
+```javascript
+res.render('index', { title: 'Hello', message: 'Please log in' });
+```
+
+Now refresh your page, and you should see those values rendered in your view in the correct spot as laid out in your `index.pug` file!
+
+Submit your page when you think you've got it right. If you're running into errors, you can check out the <a href="https://forum.freecodecamp.org/t/advanced-node-and-express/567135#use-a-template-engines-power-2" target="_blank" rel="noopener noreferrer nofollow">project completed up to this point</a>.
+
+# --hints--
+
+Pug should correctly render variables.
+
+```js
+async () => {
+  const url = new URL("/", code);
+  const res = await fetch(url);
+  const data = await res.text();
+  assert.match(
+    data,
+    /pug-variable("|')>Please log in/gi,
+    'Your projects home page should now be rendered by pug with the projects .pug file unaltered'
+  );
+}
+```
+
@@ -0,0 +1,47 @@
+---
+id: 5895f70ef9fc0f352b528e6b
+title: How to Put a Profile Together
+challengeType: 2
+forumTopicId: 301554
+dashedName: how-to-put-a-profile-together
+---
+
+# --description--
+
+Now that you can ensure the user accessing the `/profile` is authenticated, you can use the information contained in `req.user` on your page.
+
+Pass an object containing the property `username` and value of `req.user.username` as the second argument for the `render` method of the profile view.
+
+Then, go to your `profile.pug` view, and add the following line below the existing `h1` element, and at the same level of indentation:
+
+```pug
+h2.center#welcome Welcome, #{username}!
+```
+
+This creates an `h2` element with the class `center` and id `welcome` containing the text `Welcome,` followed by the username.
+
+Also, in `profile.pug`, add a link referring to the `/logout` route, which will host the logic to unauthenticate a user:
+
+```pug
+a(href='/logout') Logout
+```
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://forum.freecodecamp.org/t/advanced-node-and-express/567135#how-to-put-a-profile-together-9" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+You should correctly add a Pug render variable to `/profile`.
+
+```js
+async () => {
+  const url = new URL("/_api/server.js", code);
+  const res = await fetch(url);
+  const data = await res.text();
+  assert.match(
+    data,
+    /username:( |)req.user.username/,
+    'You should be passing the variable username with req.user.username into the render function of the profile page'
+  );
+}
+```
+
@@ -0,0 +1,99 @@
+---
+id: 589a69f5f9fc0f352b528e70
+title: Implementation of Social Authentication
+challengeType: 2
+forumTopicId: 301559
+dashedName: implementation-of-social-authentication
+---
+
+# --description--
+
+The basic path this kind of authentication will follow in your app is:
+
+1.  User clicks a button or link sending them to your route to authenticate using a specific strategy (e.g. GitHub).
+2.  Your route calls `passport.authenticate('github')` which redirects them to GitHub.
+3.  The page the user lands on, on GitHub, allows them to login if they aren't already. It then asks them to approve access to their profile from your app.
+4.  The user is then returned to your app at a specific callback url with their profile if they are approved.
+5.  They are now authenticated, and your app should check if it is a returning profile, or save it in your database if it is not.
+
+Strategies with OAuth require you to have at least a *Client ID* and a *Client Secret* which is a way for the service to verify who the authentication request is coming from and if it is valid. These are obtained from the site you are trying to implement authentication with, such as GitHub, and are unique to your app--**THEY ARE NOT TO BE SHARED** and should never be uploaded to a public repository or written directly in your code. A common practice is to put them in your `.env` file and reference them like so: `process.env.GITHUB_CLIENT_ID`. For this challenge you are going to use the GitHub strategy.
+
+Follow <a href="https://www.freecodecamp.org/news/how-to-set-up-a-github-oauth-application/" target="_blank" rel="noopener noreferrer nofollow">these instructions</a> to obtain your *Client ID and Secret* from GitHub. Set the homepage URL to your homepage (**not the project code's URL**), and set the callback URL to the same homepage URL with `/auth/github/callback` appended to the end. Save the client ID and your client secret in your project's `.env` file as `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET`.
+
+In your `routes.js` file, add `showSocialAuth: true` to the homepage route, after `showRegistration: true`. Now, create 2 routes accepting GET requests: `/auth/github` and `/auth/github/callback`. The first should only call passport to authenticate `'github'`. The second should call passport to authenticate `'github'` with a failure redirect to `/`, and then if that is successful redirect to `/profile` (similar to your last project).
+
+An example of how `/auth/github/callback` should look is similar to how you handled a normal login:
+
+```js
+app.route('/login')
+  .post(passport.authenticate('local', { failureRedirect: '/' }), (req,res) => {
+    res.redirect('/profile');
+  });
+```
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://forum.freecodecamp.org/t/advanced-node-and-express/567135#implementation-of-social-authentication-3" target="_blank" rel="noopener noreferrer nofollow">check out the project up to this point</a>.
+
+# --hints--
+
+Route `/auth/github` should be correct.
+
+```js
+async () => {
+  try {
+    const res = await fetch(code + '/_api/routes.js');
+    if (res.ok) {
+      const data = await res.text();
+      assert.match(
+          data.replace(/\s/g, ''),
+          /passport.authenticate.*?github/g,
+          'Route auth/github should only call passport.authenticate with github'
+        );
+    } else {
+      throw new Error(res.statusText);
+    }
+    const res2 = await fetch(code + '/_api/app-stack');
+    if (res2.ok) {
+      const data2 = JSON.parse(await res2.json());
+      const dataLayer = data2.find(layer => layer?.route?.path === '/auth/github');
+      assert.deepInclude(dataLayer?.route, { methods: {get: true}, path: "/auth/github"});
+      assert.deepInclude(dataLayer?.route?.stack?.[0], {method: "get", name: "authenticate"});
+    } else {
+      throw new Error(res2.statusText);
+    }
+  } catch (err) {
+    throw new Error(err);
+  }
+}
+```
+
+Route `/auth/github/callback` should be correct.
+
+```js
+async () => {
+  try {
+    const res = await fetch(code + '/_api/routes.js');
+    if (res.ok) {
+      const data = await res.text();
+      assert.match(
+        data.replace(/\s/g, ''),
+        /failureRedirect:("|')\/\1/g,
+        'Route auth/github/callback should accept a get request and call passport.authenticate for github with a failure redirect to home'
+      );
+    } else {
+      throw new Error(res.statusText);
+    }
+    const res2 = await fetch(code + '/_api/app-stack');
+    if (res2.ok) {
+      const data2 = JSON.parse(await res2.json());
+      const dataLayer = data2.find(layer => layer?.route?.path === '/auth/github/callback');
+      assert.deepInclude(dataLayer?.route, { methods: {get: true}, path: "/auth/github/callback"});
+      assert.deepInclude(dataLayer?.route?.stack?.[0], {method: "get", name: "authenticate"});
+    } else {
+      throw new Error(res2.statusText);
+    }
+  } catch (err) {
+    throw new Error(err);
+  }
+}
+```
+
@@ -0,0 +1,96 @@
+---
+id: 589a69f5f9fc0f352b528e71
+title: Implementation of Social Authentication II
+challengeType: 2
+forumTopicId: 301557
+dashedName: implementation-of-social-authentication-ii
+---
+
+# --description--
+
+The last part of setting up your GitHub authentication is to create the strategy itself. `passport-github@~1.1.0` has already been added as a dependency, so require it in your `auth.js` file as `GitHubStrategy` like this: `const GitHubStrategy = require('passport-github').Strategy;`. Do not forget to require and configure `dotenv` to use your environment variables.
+
+To set up the GitHub strategy, you have to tell Passport to use an instantiated `GitHubStrategy`, which accepts 2 arguments: an object (containing `clientID`, `clientSecret`, and `callbackURL`) and a function to be called when a user is successfully authenticated, which will determine if the user is new and what fields to save initially in the user's database object. This is common across many strategies, but some may require more information as outlined in that specific strategy's GitHub README. For example, Google requires a *scope* as well which determines what kind of information your request is asking to be returned and asks the user to approve such access.
+
+The current strategy you are implementing authenticates users using a GitHub account and OAuth 2.0 tokens. The client ID and secret obtained when creating an application are supplied as options when creating the strategy. The strategy also requires a `verify` callback, which receives the access token and optional refresh token, as well as `profile` which contains the authenticated user's GitHub profile. The `verify` callback must call `cb` providing a user to complete authentication.
+
+Here's how your new strategy should look at this point:
+
+```js
+passport.use(new GitHubStrategy({
+  clientID: process.env.GITHUB_CLIENT_ID,
+  clientSecret: process.env.GITHUB_CLIENT_SECRET,
+  callbackURL: /*INSERT CALLBACK URL ENTERED INTO GITHUB HERE*/
+},
+  function(accessToken, refreshToken, profile, cb) {
+    console.log(profile);
+    //Database logic here with callback containing your user object
+  }
+));
+```
+
+Your authentication won't be successful yet, and it will actually throw an error without the database logic and callback, but it should log your GitHub profile to your console if you try it!
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://forum.freecodecamp.org/t/advanced-node-and-express/567135#implementation-of-social-authentication-ii-4" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+`passport-github` dependency should be added.
+
+```js
+async () => {
+  const url = new URL("/_api/package.json", code);
+  const res = await fetch(url);
+  const packJson = await res.json();
+  assert.property(
+    packJson.dependencies,
+    'passport-github',
+    'Your project should list "passport-github" as a dependency'
+  );
+}
+```
+
+`passport-github` should be required.
+
+```js
+async () => {
+  const url = new URL("/_api/auth.js", code);
+  const res = await fetch(url);
+  const data = await res.text();
+  assert.match(
+    data,
+    /require.*("|')passport-github("|')/gi,
+    'You should have required passport-github'
+  );
+}
+```
+
+GitHub strategy should be setup correctly thus far.
+
+```js
+async () => {
+  const url = new URL("/_api/auth.js", code);
+  const res = await fetch(url);
+  const data = await res.text();
+  assert.match(
+    data,
+    /passport\.use.*new GitHubStrategy/gis,
+    'Passport should use a new GitHubStrategy'
+  );
+  assert.match(
+    data,
+    /callbackURL:\s*("|').*("|')/gi,
+    'You should have a callbackURL'
+  );
+  assert.match(
+    data,
+    /process\.env(\.GITHUB_CLIENT_SECRET|\[(?<q>"|')GITHUB_CLIENT_SECRET\k<q>\])/g,
+    'You should use process.env.GITHUB_CLIENT_SECRET'
+  );
+  assert.match(
+    data,
+    /process\.env(\.GITHUB_CLIENT_ID|\[(?<q>"|')GITHUB_CLIENT_ID\k<q>\])/g,
+    'You should use process.env.GITHUB_CLIENT_ID'
+  );
+}
+```
@@ -0,0 +1,76 @@
+---
+id: 589fc832f9fc0f352b528e78
+title: Announce New Users
+challengeType: 2
+forumTopicId: 301546
+dashedName: announce-new-users
+---
+
+# --description--
+
+Many chat rooms are able to announce when a user connects or disconnects and then display that to all of the connected users in the chat. Seeing as though you already are emitting an event on connect and disconnect, you will just have to modify this event to support such a feature. The most logical way of doing so is sending 3 pieces of data with the event: the username of the user who connected/disconnected, the current user count, and if that username connected or disconnected.
+
+Change the event name to `'user'`, and pass an object along containing the fields `username`, `currentUsers`, and `connected` (to be `true` in case of connection, or `false` for disconnection of the user sent). Be sure to change both `'user count'` events and set the disconnect one to send `false` for the field `connected` instead of `true` like the event emitted on connect.
+
+```js
+io.emit('user', {
+  username: socket.request.user.username,
+  currentUsers,
+  connected: true
+});
+```
+
+Now your client will have all the necessary information to correctly display the current user count and announce when a user connects or disconnects! To handle this event on the client side we should listen for `'user'`, then update the current user count by using jQuery to change the text of `#num-users` to `'{NUMBER} users online'`, as well as append a `<li>` to the unordered list with id `messages` with `'{NAME} has {joined/left} the chat.'`.
+
+An implementation of this could look like the following:
+
+```js
+socket.on('user', data => {
+  $('#num-users').text(data.currentUsers + ' users online');
+  let message =
+    data.username +
+    (data.connected ? ' has joined the chat.' : ' has left the chat.');
+  $('#messages').append($('<li>').html('<b>' + message + '</b>'));
+});
+```
+
+Submit your page when you think you've got it right. If you're running into errors, you can check out <a href="https://forum.freecodecamp.org/t/advanced-node-and-express/567135/3#announce-new-users-10" target="_blank" rel="noopener noreferrer nofollow">the project completed up to this point </a>.
+
+# --hints--
+
+Event `'user'` should be emitted with `username`, `currentUsers`, and `connected`.
+
+```js
+async () => {
+  const url = new URL("/_api/server.js", code);
+  const res = await fetch(url);
+  const data = await res.text();
+  // Regex is lenient to match both `username` and `name` as the key on purpose.
+  assert.match(
+    data,
+    /io.emit.*('|")user\1.*name.*currentUsers.*connected/s,
+    'You should have an event emitted named user sending name, currentUsers, and connected'
+  );
+}
+```
+
+Client should properly handle and display the new data from event `'user'`.
+
+```js
+async () => {
+  const url = new URL("/public/client.js", code);
+  const res = await fetch(url);
+  const data = await res.text();
+  assert.match(
+    data,
+    /socket.on.*('|")user\1[^]*num-users/s,
+    'You should change the text of "#num-users" within on your client within the "user" event listener to show the current users connected'
+  );
+  assert.match(
+    data,
+    /socket.on.*('|")user\1[^]*messages.*li/s,
+    'You should append a list item to "#messages" on your client within the "user" event listener to announce a user came or went'
+  );
+}
+```
+