Firebase Auth (build 1): for Skadate (11050). Platform version: 1.8.4 (10840)

Firebase Auth plugin is based on Google's  application development product called "Firebase Authentication".
Offifical Firebase Authenication documentation: https://firebase.google.com/docs/auth

Plugin enables Google, Facebook, LinkedIn and Twitter connects on websites powered by SkaDate.
Plugin can be downloaded from https://hello.skadate.com/index.php?rp=/download/category/11/Plugins.html .
Installation guide: https://hello.skadate.com/index.php?rp=/knowledgebase/41/Intalling-plugins.html

Build 1.0 is compatible only with desktop version of SkaDate software (Skadate (11050). Platform version: 1.8.4 (10840)). To get intergation with iOS/Android/PWA apps contact SkaDate Custom Development department for a quote.

To use Firebase Auth plugin on your site after installation, you should set up a Firebase Project and connect it to your SkaDate website.

Table of contents:

Sharing access details with SkaDate Support or SkaDate PM

To share Google Firebase project:

  1. Go to https://console.firebase.google.com/  > follow steps 1-5 of "Creating Firebase Project"
  2. Click gear wheel icon next to "Project Overview" in upper left corner >  click "Users and permissions" > Add member
  3. Add our email: [email protected] > select "Editor" role > done > Add member. Copy your project name next to "Project Overview" in upper left corner and notify SkaDate Support ( or your Project Manager) that access details to {$paste_your_project_name_here} were shared with [email protected]


To share Facebook application:

  1. Go to https://developers.facebook.com/apps > follow step 3 of "Facebook Connect"
  2. Click Roles > Roles from left navigation menu > Add Developers. Add our user: ska.date.7 as developer
  3. Go to Settings > Basic from left navigation menu > copy your application display  name and notify SkaDate Support ( or your Project Manager) that access details to {$paste_your_display_name_here} were shared with ska.date.7

To share Twitter appliation: Access details to Twitter application can not be shared due to Twitter rules. To get assistance with setup provide your Twitter account access details directly to SkaDate Support or your Project Manager.

Creating Firebase Project ( required)

Note: If you do not want to connect Firebase to existing Google Cloud Platform project, you can skip steps 1-3 and create Firebase project manually at step 3 without connecting it to existing  Google Cloud Platform projects.

  1. Open Google Developer Console and create new project. View screen shot
  2. Enter desired Project Name and click "Create". Ex: Firebase Auth
  3. After project is created open Firebase Console . Click "Add project"
  4. Under "Project name" drop down select project name created earlier. View screen shot
  5. Click "Add Firebase". You will land on "Project Overview" page
  6. Click "Web" icon  under "Get started by adding Firebase to your app ". View screen shot
  7. Enter deisred App nickname > click "Next". If you get several steps keep clicking "Next" until "Continue to Console" button becomes active. Click "Continue to Console"
  8. Under "Project Overview" click gear wheel icon > click "Project settings" > scroll down to "Your apps" section > under "Firebase SDK snippet" tap "Config" radio button >  from SDK snippet copy  and save in a text document following:
    • apiKey
    • authDomain
  9. Go to Admin panel of your SkaDate website > Plugins > Installed plugins > Firebase Auth > Settings. Add saved apiKey and authDomain into "Api setup" widget > check at least "Google" box under "Social networks" widget and save/submit your changes. Note: you must check at least one network to be able to save changes.
  10. Go back to Firebase Console > Project Overview. From the left navigation menu select "Develop"  and click "Authentication"
  11. Open "Sign-in method" tab and scroll down to "Advanced" section. Click "Change" next to "One account per email address "
  12. In an opened popup select "Allow creation of multiple accounts with the same email address" option and save changes
  13. Click "Add domain" under "Authorized domains" section. Add your website's domain name/s. Ex: demo.skadate.com. Note: if your domain name contains "www" make sure to add that domain name as well. Ex: www.demo.skadate.com . View screen shot
  14. Proceed with setting up sign-in  providers

Setting up sign-in providers

Note: Sign in  providers are configured in Firebase Console > Project Overview> Develop> Authentication > "Sign-in method" tab. To setup a provider hover the mouse over needed provided> click pencil icon.

Google Connect

While in  Firebase Console > Project Overview> Develop> Authentication > "Sign-in method" tab  hover the mouse over "Google" provider> click pencil icon > Toogle "Enable"  button

  1. Add desired "Project public-facing name". View screen shot
  2. Select "Project support email". View screen shot
  3. Save changes
  4. Make sure you've addedd correct domain name when creating Firebase project credentiaons ( refer to step 13 from "Creating Firebase Project" section of this guide)
  5. Go to Admin panel of your SkaDate website > Plugins > Installed plugins > Firebase Auth > Settings. Enable "Google connect" by checking "Google" box within "Social networks" widget
  6. Go to your site (https://your_domain_here/sign-in) and test Google integration by registering a new account via Google button.
Facebook Connect
  1. While in  Firebase Console > Project Overview> Develop> Authentication > "Sign-in method" tab  hover the mouse over "Google" provider> click pencil icon > Toogle "Enable"  button
  2. Copy your OAuth redirect URI and save in a text document. You will need it later. View screen shot
  3. Go to https://developers.facebook.com/apps> My Apps > Create App ID
    • Enter desired Display Name. Ex: My Cool Site
    • Enter valid contact email address
    • Click "Create App ID"
    • Peform the security check if asked to
    • Page will refresh and redirect you to your app details page
  4. Open created app details page. From the left navigation menu click "Settings" >> " Basic":
    • Display name: correct your app name if you would like to
    • App domains: add your site URL in 2 formats. With "www" and without. Ex: www.demo.skadate.com, demo.skadate.com
    • Contact Email: correct your email if you would like to
    • Privacy Policy URL: enter link to your privacy policy. Ex: https://site_URL_here/privacy
    • Terms of Service URL: add link to your terms of use. Ex: https://site_URL_here/terms-of-use
    •  App Icon (optional): upload app icon in requested format/size
    • Category: choose your category. Ex: Social Networks & Dating
    • Save changes
  5. Click "Add platform" located before the "Save changes" button. Select "Website" platform >> Add valid (!), actual(!) and full (!) site URL >>Save changes
  6. From the left navigation menu click "+"  sign next to "Products". Click "Set up" under "Facebook Login" product. Select "Web" option>> Add valid (!), actual(!) and full (!) site URL >>Save
  7. Skip all other Quickstart steps by clicking "Settings" under "Facebook Login" product in left navigation menu. Configure "Client OAuth Settings" section as in screen shot bellow
  8. Add OAuth redirect URI copied from your Firebase project at step 2 of this guide into "Valid OAuth Redirect URIs" field. View screen shot
  9. Click on "OFF" sign in top navigation bar to make your app Live
  10. Go to Settings > Basic of your Facebook Application. Copy
    • App ID
    • App secret
  11. Go back to your Firebase project >  Add copied information into your Firebase project> Project Overview> Develop> Authentication > "Sign-in method" > Facebook. Add copied app ID and secret into corresponding fields ( screen shot is available under step 2 above)
  12. Go to Admin panel of your SkaDate website > Plugins > Installed plugins > Firebase Auth > Settings. Enable "Facebook Connect" by checking "Facebook" box within "Social networks" widget
  13. Go to your site (https://your_domain_here/sign-in) and test Facebook integration by registering a new account via Facebook button.

Twitter Connect

  1. While in  Firebase Console > Project Overview> Develop> Authentication > "Sign-in method" tab  hover the mouse over "Twitter" provider> click pencil icon > Toogle "Enable"  button
  2. Copy your callback URL and save in a text document. You will need it later
  3. Go to  https://developer.twitter.com/en/apps > Create an app (https://developer.twitter.com/en/apps/create). Note: if you don't have an active Twitter Developer account you will be asked to apply at this stage. Apply for a Twitter developer account: You will be asked several questions:
    • What is your primary reason for using Twitter developer tools? Answer: Building Constumer Products
    • You are signing up for a team developer account. Answer: selected desired account type. Depending on selected account type you will be asked to provide further information.
    • Twitter Connect feature that comes with Firebase Auth plugin does not:
      • analyze Twitter data
      • use Tweet, Retweet, like, follow, or Direct Message functionality
      • display Tweets or aggregate data about Twitter content outside of Twitter
      • make Twitter content or derived information available to a government entity
    • Confirm provided information, agree to Twitter Terms of use and follow further on-screen instructions from Twitter.
    • After application is submitted you will have to wait until it is approved by Twitter
         
  4. After approval  go to https://developer.twitter.com/en/apps > Create an app
  5. Give your application desired App name and add desired Application description
  6. Add your full website URL into Website URL field
  7. Check "Enable Sign in with Twitter" box
  8. Add callback URL copied from Firebase at step 2 into "Callback URLs" field
  9. Add Organization name and Organization website URL if applicable
  10. Add bellow text into "Tell us how this app will be used" field. Make sure to replace "Site Name" with your actual site name > click "Create":
    • Sample description: This application is connected to Twitter Login feature at {$SiteName}. Application requests only read permissions and is based on https://developer.twitter.com/en/docs/basics/authentication/guides/log-in-with-twitter intergation.
  11. At next step you can review submitted information and upload app icon
  12. Click "Permissions" tab > Edit > select "Read Only". Under "Additional permissions" check "Request email address from users" box > save changes
  13. Click "Keys and tokens" tab. Under "Consumer API keys" copy your API and API secret keys
  14. Go back to Firebase Console > Project Overview> Develop> Authentication > "Sign-in method" tab  hover the mouse over "Twitter" provider> click pencil icon > Toogle "Enable"  button > paste copied Twitter Consumer API keys into corresponding fields at Firebase
  15. Go to Admin panel of your SkaDate website > Plugins > Installed plugins > Firebase Auth > Settings. Enable "Twitter Connect" by checking "Twitter" box within "Social networks" widget.
  • 0 Users Found This Useful
Was this answer helpful?

Related Articles

Firebase Auth: how to share access details with SkaDate team for setup

To share Google Firebase project: Open Google Developer Console and create new project. View...

Firebase Auth (build 11120): for Skadate (11120). Platform version: 1.8.7 (11120)

Firebase Auth plugin enables Google, Facebook and Twitter connects on websites powered by...