MEAN Stack – Social Accounts to Sign-in with Facebook – Day 5

The MEAN Challenge Continues!

This video is part of the 30 Day MEAN Stack Honolulu Challenge

In this video we’ll look at the MEAN App Login Page, and look at how to set up a MEAN App with Passport Facebook authentication.

We look at:
– The MEAN Stack Sign-up and Sign-in pages
– The process for setting up Facebook authentication using Passport.js

The functional design post mentioned in this video of the home page – use case, storyboard and wireframes can be found here: Home Page Design.

Tags:
Next

MEAN Stack – Responsive Bootstrap Login Forms – Day 6
Previous

MEAN Stack – Intro to AngularJS ngRepeat & ngClass – Day 4

7 Comments

Let me know what you think

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • PJ
    Reply

    Shristi: Very good job.

    I ran into Oauth problem and was able to solve it … I am posting the problem and solution here.

    Facebook (and I assume others) signup and signin were not working with the Oauth. After signup or signin, I would get error: “Error: /api/auth/facebook/[object%20Object] is not a valid path.” But if I went back to my base URL of localhost:3000, I would be logged in. So the problem was that authentication was successful, but the redirect to landing page was not occurring.

    I found the solution here: https://github.com/meanjs/mean/issues/1290.
    In \modules\users\server\controllers\users\users.authentication.server.controller.js (note in the new meanjs the directory structure has changed), replace the return part of code below:
    exports.oauthCallback = function (strategy) {
    …
    return res.redirect(redirectURL || sessionRedirectURL || ‘/’);
    …
    }

    with

    return res.redirect(typeof redirectURL == ‘string’ ? redirectURL : sessionRedirectURL || ‘/’);

    Now after signup or signin the landing page appears.

  • Madhur Mehta
    Reply

    Hi, I am trying to use google maps api. Whenever i try to do this
    var mapOptions = {
    center: new google.maps.LatLng(37.7831,-122.4039),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    $scope.map = new google.maps.Map(document.getElementById(‘map’), mapOptions);

    It throws me the error “Reference error: google not found”

    Now i tried to add the script in my view.html just above the section tag like this :

    …

    but this doesn’t seem to fix the problem either. Also where is the index.html page which includes all the scripts and everything?

    P.S I am using webstorm

  • Madhur Mehta
    Reply

    HI I tried following your code and tried to login using my face book account. Now when i try to do that it throws me the following error “Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App’s domains.”

    P.S. I have created the app_id and app_secret.

    Any help is appreciated.

  • Harsh
    Reply

    Hey Shristi,
    Right now i am working on facebook login from my web app.
    As you mentioned in video that we get ‘APP ID’ and ‘APP SECRET’.
    But when i registered my app to facebook then i get some code with some information without ‘APP SECRET’.
    What should i do now.?

    and facebook has asked for your web url,
    in this field do i have to add this link
    http://localhost:3000/auth/facebook/callback
    Right..???