• Aayush anand

    Hi nice tutorial , i am getting error in running the backend, it says node_module is not recognised as an internal or external command , my node version is v6.10.3 and npm version is 5.0.1, please help.

    • Hi Aayush, what platform are you on? Is it OS X, Linux or Windows?

      • Aayush anand

        Windows 7

        • Unfortunately, I don’t have Windows handy, so I can’t try it out myself. But it looks like the issue might be with the paths in ‘start’ command in package.json:

          “start”: “node_modules/nodemon/bin/nodemon.js — node_modules/babel-cli/bin/babel-node.js server.js”
          },

          Maybe try changing “node_modules/…” to absolute path, something like “C:Projectsbackendnode_modules…”.

          Or if you google that error there is a lot of similar reports for Windows. Let me know when you find out what the problem was, so I can update the tutorial!

        • Also try this:

          “start”: “nodemon node_modules/nodemon/bin/nodemon.js — node_modules/babel-cli/bin/babel-node.js server.js”

          And let me know if that works.

  • Peter

    I’ve been following along with your tutorials and they’ve worked great for me so far. I’m working in the expo development environment so I haven’t worked in xcode at all. Is there any way to complete the platform specific portions of the FB auth if I can’t access the .xcodproj files?

  • Frederico Quintão

    Hi, thanks for the great tutorial! I have a question here. I’m using the create-react-native-app command to setup the app:

    create-react-native-app OAuthLogin

    instead of
    react-native OAuthLogin

    this does not generate any Android nor IOS folder. Does it mean I cannot use the “Linking” tricky?

    Again, thanks for the great work!

  • Robert Stevens

    Hi, great tutorial. Do you have one where you use Firebase to handle the social auth?

  • Jooyoung Lee

    Hello! Thank you for a wonderful post. I have succeeded facebook login, but i wonder how to send token/cookies to the app when the authentication is done, and the way to store this token/cookie in the native app so that users don’t need to login even after they leave the app. Can you teach me?

  • Almog Kashany

    Hi ,
    how i can run your project from github ?
    i run npm start in the server and in the app .
    in the appp i get ” Loading dependency graph, done.” .
    and nothing happen .
    how i can get QR for Expo to see the demo ?
    in localhost:8081/ i get only “React Native packager is running.”.

    thank you .

  • Abhijit

    npm start gives the error and didnt start the server
    so when webpage open it gives error like
    my app run on 8081 port
    The webpage athttp://localhost:3000/auth/facebook could not be loaded because ERR_CONNECTION_REFUSED

  • John

    Is it possible to restrict opening the authentication endpoint to just the mobile app? And prevent all other computers from accessing `/auth/provider/` ?

    P.S : You’ve mentioned `/auth/facebook` as redirect URI in facebook developer portal but in the screenshot it’s `/auth/facebook/callback` . Same case in Google. May I know which is right?

    • You can add a secret key to all requests to `/auth/provider/` and deny access if the key wasn’t provided or incorrect.

      P.S.: `/auth/facebook/callback` is the right one. Sorry about that, I fixed the typo.

  • Leopotam Beast

    >> That’s because it’s considered bad UX and Apple won’t approve your app if you were to publish it to Apple Store.

    Are you sure about it? Because apple rejects Linking.canOpenURL due to it can be used for installed apps scanning.

    • I was submitting an app recently and it got rejected because of that.

  • Sandino

    Hi @konstantinshkut:disqus I want to say a big THANK YOU!! for sharing this. It was really well explained and easy to follow. Following you hoping to see more good content 🙂

  • Patrick Kelly

    Great tutorial! I followed this tutorial and the main UI works, but I get a message in Safari “Safari cannot open the page because it could not connect to the server” when I click on either of the buttons. This happens on my iPhone 7 and on my emulator. Any ideas how to prevent this? Thanks!

    • Irina Tyshkevich

      I’m having the same issue. Any luck??

      • chris reyes

        Irina did you get this to work on an iphone 7 emulator

        • Irina Tyshkevich

          Hi Chris, yes I did. What’s the issue you’re seeing?

          • Nimish Gopal Sharma

            Hey Irana!

            I am facing the same issue in android emulator.
            Can you help?

  • Great tutorial, thank you 🙂

    2 things thoughts:

    1. In the npm start script you should add “node” at the start:
    “start”: “node node_modules/nodemon/bin/nodemon.js — node_modules/babel-cli/bin/babel-node.js server.js”
    instead of:
    “start”: “node_modules/nodemon/bin/nodemon.js — node_modules/babel-cli/bin/babel-node.js server.js”

    2. What about logging out? How would you implement that?

  • sicnarfngo

    is there a way to do this without having to use async/wait? im not familiar with that es7 feature.

  • Harry S. Hur

    quick question. what if you want to save user information on your own database?
    what would be the best way to handle this?

    • chris reyes

      have you found a solution to this because I would also like to use this approach to create an account on my app

      • Michal Brcko

        same question. Anyone got any solution?

  • Paulus

    Thank you, very helpful post! Much easier to set up than RN libraries like https://github.com/joonhocho/react-native-google-sign-in

  • Irina Tyshkevich

    Hello! very helpful tutorial. I’m following only the Facebook Connect piece. I’m getting “Safari cannot open the page because the address is invalid. But when I try to open “http://localhost:3000/auth/facebook” in Safari on my computer, it all works fine. Any tips?

    • Febrianto Arif Rakhman

      LOL. mistype this too. Thanks alot. ^^

    • Uzair Hassan

      server.js file to use my app name instead of OAthLogin. GL!, I did’nt find server.js using app name?

  • Irina Tyshkevich

    Is there any chance to extend this such that you can access the user’s Facebook friends etc.? Or do you have any useful links how you would do that if you’re setup your login with this framework. Thanks!

  • Muneeb Shafiq

    npm start gives the error and didnt start the server
    so when webpage open it gives error like
    my app run on 8081 port
    The webpage athttp://localhost:3000/auth/facebook could not be loaded because ERR_CONNECTION_REFUSED
    i guess it is showing error because of permissions. Kindly give solution for this.

    • It because your app don’t access “localhost” from your machine.

  • Flosut Mözil

    Hi!,
    we are setting up oAuth like you in our app. The only thing we encountered was the fact that safari-view and the android-in-app-brower always remember the credentials/cookie? of the user and therefore instantaneously log us into our app. Users are not able to log in with another account. Is there a solution for this problem?

    • ImpartialObserver

      Hi @flosutmzil:disqus

      Did you find a solution to this? I have the exact same issue, my users cannot log out and use a different google or facebook account.

  • Can Nahum

    Thank you very much for the post. I followed it and I seem to have a problem after the server redirects.
    When the react-native-safari-view finishes loading the ‘facebook’ or ‘google’ page I get the message “Safari cannot open the page because it could not establish a secure connection to the server.”
    To understand what happens, I opened Safari and went to the developer mode on the safari page.
    The dev tools on Safari showed me the message:
    “Failed to load resource: An SSL error has occurred and a secure connection to the server cannot be made”. Now, this message is shown when the connection to “https://accounts.google.com/o/oauth2/v2/auth?…”

    Any ideas? Because I tried NSAppTransport type stuff and no luck so far…
    Thanks in advance!

  • Fei Yao

    Hi,
    Thanks for the great post, and I saw the error message, “Safari cannot open the page because it could not establish a secure connection to the server”, after I click the either button.

    Also, I noticed the following err message in xcode:
    2017-10-23 14:34:25.468798-0400 OAuthLogin[72207:2590553] TCP Conn 0x60000016f000 Failed : error 0:61 [61]

    Cloud it be that it needs https:// instead. I have URL Schema configured in xcode correctly. https://uploads.disquscdn.com/images/ea25a3ebb0aa85589274704be02e8d6e42dacd708e56dd55238a29e413a4bb7f.png

  • Suprit Shah

    Great work, thanks for the awesome tutorial

  • Nacho Justicia Ramos

    Awesome work! I like it a lot everything worked fine for me 🙂
    Really, thanks a lot my friend!!!

  • james Trickey

    Just added FB auth to my app – great tutorial, thanks!

    I have one problem though. I make the call and save the data in the DB, but the session used by the auth calls is different to that used by the rest of the app because the cookie is different from safari-view.

    So when I make my next call (eg Get: initData) node just has an empty session.

    Am I doing something wrong?

    Many thanks

  • in server.js there is a error about unexpected token =>

    => done(null, transformFacebookProfile(profile._json))

    output:

    SyntaxError: Unexpected token =>
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:152:10)
    at Module._compile (module.js:624:28)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Function.Module.runMain (module.js:701:10)
    at startup (bootstrap_node.js:194:16)
    at bootstrap_node.js:618:3
    error Command failed with exit code 1.

    • I solved it put in the same line that “async()… => …”

      • Di Sun

        same problem, can you explain more on this ?

  • In “Setting Up Facebook App” I set my url as my “http://IP:3000/auth/facebook/callback” but always redirect to localhost:3000

  • zmax92

    Hi nice tutorial, but I’m having problem returning to app, after fb or google login…
    I’m testing on android device, can you please help me, what went wrong? Thanks

    https://uploads.disquscdn.com/images/fe2fb681d96e36c751bb9ba37da8bb51dd49e55efdc656af04f6cbfd9c266813.png

  • Stefan Rudvin

    Fixed the Safari error ‘safari cannot open the page’ by changing:

    // Handle Login with Facebook button tap
    loginWithFacebook = () => this.openURL(‘http://localhost:3000/auth/facebook’);

    // Handle Login with Google button tap
    loginWithGoogle = () => this.openURL(‘http://localhost:3000/auth/google’);

    i.e. http -> https in App.js

  • nouman nawaz

    Great tutorial, can i get access token and token id, if yes then how?

  • The problem for trying to access “localhost” in our app using this OAuth authentication it was solved? 0.o

  • Andrei Calazans

    Great article, thanks!

    For anyone having issues with the automatic redirection on every google authentication try, you can these protocols as params of the authentication of google to prompt for the user account.

    passport.authenticate(‘google’, {
    scope: [‘profile’, ’email’],
    prompt: ‘select_account’,
    state,
    })(req, res);

    https://developers.google.com/identity/protocols/OpenIDConnect#prompt

  • Vinson Xing

    Awesome tutorial !! Thanks a lot.
    Everything works on my side except this, when I login with google, the embedded safari doesn’t redirect to my app, it seems like the safari doesn’t aware the command ‘res.redirect(‘OAuthLogin://’)’. I change this redirect to sms://1234, try to open message, it also doesn’t work. this only happens at the first time login with google (account typing required), once I have logged in the example can redirect to app directly. BTW facebook works well.
    Do you have any ideas about this? Is this a limitation from google for a security consideration?

  • Mehmet N. Yarar

    I’ve done it for GitHub auth recently and it works perfectly. Thank you very much.

  • Uzair Hassan
    • Uzair Hassan

      Help me out ?

      • Uzair Hassan

        Solved! turn off my anti-virus software and it did work.

  • Mohit T

    Hi How to achieve logout functionality from Facebook or Google

  • Mirali Rafiyev

    For React-native ( in my case Android )
    Who has a problem with android browser (in my case chrome ) access with node server – try 10.0.2.2 instead of localhost in react-native .

  • Di Sun

    import express from ‘express’;
    ^^^^^^^

    SyntaxError: Unexpected identifier

    I need help with this, it happens when I am trying “npm start”

  • Timor Sulimani

    I’m using react-native 0.61.5

    Works perfect for android!

    For IOS i have some problems,
    I can’t find RCTLinking.xcodeproj
    and ios/OAuthLogin.xcodeproj. (myProjectName.xcodeproj)

    Can someone help?

    • could you guide me? It brings me all the data, I even save it to a database but the problem is that despite opening my application and logging in with a token that is generated, in the browser it continues to load as if it had not worked, and it does not show me the data despite having saved it in the database.

  • Minds Task Technologies

    Very informative and useful tips with excellent presentation. Looking forward to lots more articles about React Native and Thanks for sharing solution and such informative article.

    Must Visit>> https://bit.ly/3G1OmwE

  • SpinndemWeels

    Uhm what- why did he say bite..

  • Ethtuth

  • Ya Boy