I'm developing an app using React Native and I couldn't find any tutorial to authenticate my users against my own service (I think this is called 1st party app). Users need to be able to authenticate with user/password and with their Facebook account as well.
I've been researching about it and find out that I should use Authorization Code Grant Flow which should work in this way:
- Create a log-in link with the app's client ID, redirect URL, and state parameters
- The user sees the authorization prompt and approves the request
- The user is redirected back to the app’s server with an auth code
- The app exchanges the auth code for an access token
As I understand all my redirect links should start with myapp://uri opening it in native browser. But I really don't need the step two, or do I? Why should I ask the user for permissions for the same service?
One more thing that I don't understand is that to exchange auth code for an access token I need to pass my Client ID and Client Secret. But I've read that I don't have to store client secrets in native apps since it can be compromised.
2 Answers
Answers 1
How have you initiated your react native app? Via create-react-native-app or Expo XDE or through the react-native init? If either of the first two options, Facebook Auth becomes pretty straight forward. Here's a link to Expo's Facebook Auth Docs. Here's a copy/paste example of what that would look like...
async function logIn() { const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync('<APP_ID>', { permissions: ['public_profile'], }); if (type === 'success') { // Get the user's name using Facebook's Graph API const response = await fetch( `https://graph.facebook.com/me?access_token=${token}`); Alert.alert( 'Logged in!', `Hi ${(await response.json()).name}!`, ); } } This will (by default) attempt to authenticate via 'web', meaning it attempts to log in through a modal UIWebView pop up. There are other methods too, but they're only valid for stand alone apps (see behavior options).
I know you said you wanted to use your own service to do authentication, but I think it might be useful for you to at least go through the Auth0 React Native SDK Tutorial to get an idea how to secure client IDs and secrets as well as get an overall idea of what a good auth flow looks like. Then decide whether to rebuild everything yourself as your own service or whether to use theirs.
Answers 2
OAuth 2.0 is not an authentication protocol, it's for Authorization. That is why you are having problems with step 2. This might be interesting to read.
For your flow I think you have 2 options.
- Implicit flow, no client secret. (This would be my first choice)
- Use the Authorization Code Grant Flow and don't care about the secret. Do make sure you check on your server if the redirecturl is correct.
0 comments:
Post a Comment