• What's up!!

  • Talking about ...
    Expo + Firebase Authentication

    • I had a task to implement authentication, using Expo with Firebase Authentication.
    • As a result, I gained knowledge of that. But I had pain to implement it.
    • So I will share how to overcome the difficulties.
    • On the other hand, I expect someone tell me more nice solutionsđŸ˜€
  • Story...
    About background

    • My team is very small
    • Requied Authentication. Facebook, Google, Github and Twitter
    • I thought Expo make us get over the difficult even if small team.
    • I decided using Expo and Firebase Authentication
  • Actually...
    It was unexpectedly difficult

    • I believed it is easy as same as implement to web browser application.
    • I wanted leave it up to Firebase Authentication but I couldn't.
    • Required OAuth and server side implemention.
  • Points...
    I want to talk you about this talk

    • Required React Native, Firebase, OAuth, Server side knowledge
    • It takes cost more than expected
    • If you encounter a similar situation, assigned the same kind of task, I would be glad if this talk could help you.
    • On the other hand, please let me know if someone know more better solutionđŸ˜€
  • Let's get down to business

  • My strategy...
    To consider how to ease doing

    • small team
    • cross-platform
    • no Xcode, no app-store application
    • I don't like works are personalized
  • My strategy...
    To avoid implementing authentication

    • I can't be bothered to implement member registration.
    • OAuth also.
    • How do we handle users drop their cell phone.
    • Let's leave it all up to Firebase Authentication.
  • It was certainly easy...
    case of Web Browser

  • As easy as twisting a baby's hand!!

    firebase.auth().onAuthStateChanged(user => { ... })
    
    var provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider)
    
    firebase.auth().signOut()
    
  • But...
    Case of Expo

  • I could not use helpful functions

    • The functions `signInWithPopup` and `signInWithRedirect` are not allowed in native app.
    • Using `signInWithCredential` instead of the functions.
    var credential = getCredential() // You need to implement yourself
    firebase.auth().signInAndRetrieveDataWithCredential(credential);
    

    Required to get access token to create credential every provider

  • How do we get access token every prvider

    • Facebook is easy just using Expo
    • Google and Github are OAuth 2.0
    • Twitter is OAuth 1.0
  • By the way...
    Do you know the difference between
    OAuth1.0 and OAuth2.0?

  • The differences

    • Complicated Authentication flow
    • Complex signature
    • Mobile app
    • Scale out
  • Let's get back on track.

    I will back to talk about getting access token

  • Easy...Facebook(Expo)

      import { AuthSession, Facebook } from 'Expo'
    
      async handleFacebookLogin() {
        const { type, token } = await Facebook.logInWithReadPermissionsAsync(
          FACEBOOK_APP_ID,
          { permissions: ['public_profile'] }
        )
        if (type !== 'success') {
          return
        }
        const credential = firebase.auth.FacebookAuthProvider.credential(token)
        firebase.auth().signInAndRetrieveDataWithCredential(credential)
      }
    
  • Google(Expo)

    const REDIRECT_URL = AuthSession.getRedirectUrl()
    async handleGoogleLogin() {
      const result = await AuthSession.startAsync({
        authUrl:
          `https://accounts.google.com/o/oauth2/v2/auth?` +
          `&client_id=${GOOGLE_CLIENT_ID}` +
          `&redirect_uri=${REDIRECT_URL}` +
          `&response_type=code` +
          `&access_type=offline` +
          `&scope=profile`,
      });
      const { id_token } = await createTokenWithCode('google', result.params.code)
      var credential = firebase.auth.GoogleAuthProvider.credential(id_token);
      firebase.auth().signInAndRetrieveDataWithCredential(credential);
    }
    
  • Google(Node.js)

    app.post('/auth/google', async (req, res) => {
      const { code, redirect_uri } = req.body
      async function createTokenWithGoogleCode(code, redirect_uri) {
        const url = `https://www.googleapis.com/oauth2/v4/token`
        const res = await fetch(url, {
          method: 'POST',
          body: JSON.stringify({
            code,
            client_id: config.GOOGLE.CLIENT_ID,
            client_secret: config.GOOGLE.CLIENT_SECRET,
            redirect_uri,
            grant_type: 'authorization_code'
          })
        });
        return await res.json()
      }
      return res.json(await createTokenWithGoogleCode(code, redirect_uri))
    }
    
  • I will skip Github and Twitter

    I posted the code on my blog entry

  • Recap...

    This task required an Enginner who can handle React Native, Firebase, implementing serer-side OAuth

    Unfortunately, you assined the kind of task. I hope this talk would help you.

  • You can hire me, by the way.

  • Thank you!

Item 1 of 24
Expo with Firebase Authentication / We Are JavaScripters! @30th