Skip to content
On this page

Pre-release

You are looking at the website for the fully functional Feathers v5 (Dove) pre-release. Check out what's new, and please let us know about any issues or questions . The current v4 documentation can be found at crow.docs.feathersjs.com.

Facebook

Facebook login can be initialized like any other OAuth provider by adding the app id and secret to config/default.json:

js
{
  "authentication": {
    "oauth": {
      "facebook": {
        "key": "<App ID>",
        "secret": "<App Secret>"
      }
    }
  }
}
{
  "authentication": {
    "oauth": {
      "facebook": {
        "key": "<App ID>",
        "secret": "<App Secret>"
      }
    }
  }
}

Requesting the email property requires adding additional scope to the oauth configuration:

js
{
  "authentication": {
    "oauth": {
      "facebook": {
        "key": "<App ID>",
        "secret": "<App Secret>",
        "scope": ["email, public_profile"]
      }
    }
  }
}
{
  "authentication": {
    "oauth": {
      "facebook": {
        "key": "<App ID>",
        "secret": "<App Secret>",
        "scope": ["email, public_profile"]
      }
    }
  }
}

Application client and secret

The client id (App ID) and secret can be found in the Settings of the Facebook app:

Facebook app settings

Getting profile data

The standard OAuth strategy only returns the default profile fields (id and name). To get other fields, like the email or profile picture, the getProfile method of the OAuth strategy needs to be customized to call the Graph API profile endpoint https://graph.facebook.com/me with an HTTP request library like Axios requesting the additional fields.

Pro tip: Facebook API requests can be tested via the Graph API explorer.

The following example allows to log in with Facebook in the chat application from the guide:

ts
import { Params } from '@feathersjs/feathers'
import {
  AuthenticationService,
  JWTStrategy,
  AuthenticationRequest
} from '@feathersjs/authentication'
import { LocalStrategy } from '@feathersjs/authentication-local'
import {
  expressOauth,
  OAuthStrategy,
  OAuthProfile
} from '@feathersjs/authentication-oauth'
import axios from 'axios'
import { Application } from './declarations'

declare module './declarations' {
  interface ServiceTypes {
    authentication: AuthenticationService & ServiceAddons<any>
  }
}

class FacebookStrategy extends OAuthStrategy {
  async getProfile(authResult: AuthenticationRequest, _params: Params) {
    // This is the OAuth access token that can be used
    // for Facebook API requests as the Bearer token
    const accessToken = authResult.access_token

    const { data } = await axios.get('https://graph.facebook.com/me', {
      headers: {
        authorization: `Bearer ${accessToken}`
      },
      params: {
        // There are
        fields: 'id,name,email'
      }
    })

    return data
  }

  async getEntityData(profile: OAuthProfile, existing: any, params: Params) {
    // `profile` is the data returned by getProfile
    const baseData = await super.getEntityData(profile, existing, params)

    return {
      ...baseData,
      email: profile.email
    }
  }
}

export default function (app: Application) {
  const authentication = new AuthenticationService(app)

  authentication.register('jwt', new JWTStrategy())
  authentication.register('local', new LocalStrategy())
  authentication.register('facebook', new FacebookStrategy())

  app.use('/authentication', authentication)
  app.configure(expressOauth())
}
import { Params } from '@feathersjs/feathers'
import {
  AuthenticationService,
  JWTStrategy,
  AuthenticationRequest
} from '@feathersjs/authentication'
import { LocalStrategy } from '@feathersjs/authentication-local'
import {
  expressOauth,
  OAuthStrategy,
  OAuthProfile
} from '@feathersjs/authentication-oauth'
import axios from 'axios'
import { Application } from './declarations'

declare module './declarations' {
  interface ServiceTypes {
    authentication: AuthenticationService & ServiceAddons<any>
  }
}

class FacebookStrategy extends OAuthStrategy {
  async getProfile(authResult: AuthenticationRequest, _params: Params) {
    // This is the OAuth access token that can be used
    // for Facebook API requests as the Bearer token
    const accessToken = authResult.access_token

    const { data } = await axios.get('https://graph.facebook.com/me', {
      headers: {
        authorization: `Bearer ${accessToken}`
      },
      params: {
        // There are
        fields: 'id,name,email'
      }
    })

    return data
  }

  async getEntityData(profile: OAuthProfile, existing: any, params: Params) {
    // `profile` is the data returned by getProfile
    const baseData = await super.getEntityData(profile, existing, params)

    return {
      ...baseData,
      email: profile.email
    }
  }
}

export default function (app: Application) {
  const authentication = new AuthenticationService(app)

  authentication.register('jwt', new JWTStrategy())
  authentication.register('local', new LocalStrategy())
  authentication.register('facebook', new FacebookStrategy())

  app.use('/authentication', authentication)
  app.configure(expressOauth())
}
import { Params } from '@feathersjs/feathers'
import {
  AuthenticationService,
  JWTStrategy,
  AuthenticationRequest
} from '@feathersjs/authentication'
import { LocalStrategy } from '@feathersjs/authentication-local'
import {
  expressOauth,
  OAuthStrategy,
  OAuthProfile
} from '@feathersjs/authentication-oauth'
import axios from 'axios'
import { Application } from './declarations.js'

class FacebookStrategy extends OAuthStrategy {
  async getProfile(authResult, _params) {
    // This is the OAuth access token that can be used
    // for Facebook API requests as the Bearer token
    const accessToken = authResult.access_token

    const { data } = await axios.get('https://graph.facebook.com/me', {
      headers: {
        authorization: `Bearer ${accessToken}`
      },
      params: {
        // There are
        fields: 'id,name,email'
      }
    })

    return data
  }

  async getEntityData(profile, existing, params) {
    // `profile` is the data returned by getProfile
    const baseData = await super.getEntityData(profile, existing, params)

    return {
      ...baseData,
      email: profile.email
    }
  }
}

export default function (app) {
  const authentication = new AuthenticationService(app)

  authentication.register('jwt', new JWTStrategy())
  authentication.register('local', new LocalStrategy())
  authentication.register('facebook', new FacebookStrategy())

  app.use('/authentication', authentication)
  app.configure(expressOauth())
}
import { Params } from '@feathersjs/feathers'
import {
  AuthenticationService,
  JWTStrategy,
  AuthenticationRequest
} from '@feathersjs/authentication'
import { LocalStrategy } from '@feathersjs/authentication-local'
import {
  expressOauth,
  OAuthStrategy,
  OAuthProfile
} from '@feathersjs/authentication-oauth'
import axios from 'axios'
import { Application } from './declarations.js'

class FacebookStrategy extends OAuthStrategy {
  async getProfile(authResult, _params) {
    // This is the OAuth access token that can be used
    // for Facebook API requests as the Bearer token
    const accessToken = authResult.access_token

    const { data } = await axios.get('https://graph.facebook.com/me', {
      headers: {
        authorization: `Bearer ${accessToken}`
      },
      params: {
        // There are
        fields: 'id,name,email'
      }
    })

    return data
  }

  async getEntityData(profile, existing, params) {
    // `profile` is the data returned by getProfile
    const baseData = await super.getEntityData(profile, existing, params)

    return {
      ...baseData,
      email: profile.email
    }
  }
}

export default function (app) {
  const authentication = new AuthenticationService(app)

  authentication.register('jwt', new JWTStrategy())
  authentication.register('local', new LocalStrategy())
  authentication.register('facebook', new FacebookStrategy())

  app.use('/authentication', authentication)
  app.configure(expressOauth())
}

Pro tip: See all available Facebook user options here.

Released under the MIT License.