4.2 KiB
4.2 KiB
id | title | challengeType |
---|---|---|
589a69f5f9fc0f352b528e70 | Implementation of Social Authentication | 2 |
Description
- User clicks a button or link sending them to our route to authenticate using a specific strategy (EG. GitHub)
- Your route calls
passport.authenticate('github')
which redirects them to GitHub. - 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 our app.
- The user is then returned to our app at a specific callback url with their profile if they are approved.
- 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.
process.env.GITHUB_CLIENT_ID
. For this challenge we're going to use the GitHub strategy.
Obtaining your Client ID and Secret from GitHub is done in your account profile settings under 'developer settings', then 'OAuth applications'. Click 'Register a new application', name your app, paste in the url to your glitch homepage (Not the project code's url), and lastly for the callback url, paste in the same url as the homepage but with '/auth/github/callback' added on. This is where users will be redirected to for us to handle after authenticating on GitHub. Save the returned information as 'GITHUB_CLIENT_ID' and 'GITHUB_CLIENT_SECRET' in your .env file.
On your remixed project, create 2 routes accepting GET requests: /auth/github and /auth/github/callback. The first should only call passport to authenticate 'github' and the second should call passport to authenticate 'github' with a failure redirect to '/' and then if that is successful redirect to '/profile' (similar to our last project).
An example of how '/auth/github/callback' should look is similar to how we handled a normal login in our last project:
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 check out the project up to this point here.
Instructions
Tests
tests:
- text: Route /auth/github correct
testString: getUserInput => $.get(getUserInput('url')+ '/_api/server.js') .then(data => { assert.match(data, /('|")\/auth\/github('|")[^]*get.*passport.authenticate.*github/gi, 'Route auth/github should only call passport.authenticate with github'); }, xhr => { throw new Error(xhr.statusText); })
- text: Route /auth/github/callback correct
testString: getUserInput => $.get(getUserInput('url')+ '/_api/server.js') .then(data => { assert.match(data, /('|")\/auth\/github\/callback('|")[^]*get.*passport.authenticate.*github.*failureRedirect:( |)("|')\/("|')/gi, 'Route auth/github/callback should accept a get request and call passport.authenticate for github with a failure redirect to home'); }, xhr => { throw new Error(xhr.statusText); })
Challenge Seed
Solution
// solution required