Firebase Auth plugin enables Google, Facebook and Twitter connects on websites powered by SkaDate.
Compatibility:desktop Skadate (11120). Platform version: 1.8.7 (11120), apps 2.0.2
Requirements: active and ready-to-use Google account.
Plugin's source code: available out of box in Admin Panel > Plugins > Available plugins. Alternatively 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
License: uses main SkaDate license
SkaDate team needs following access details to configure Firebase Auth plugin for you:
After sharing access details, make sure to notify SkaDate Support or your PM via email or ticket and specify your project/app name so that we can identify and accept your invite.
If you would like to configure plugin yourself, follow instructions bellow:
Creating Firebase Project ( required)
Important: If you are using web aps (PWA) 2.0.2 you must use the same Firebase project as in web apps.
- Open Google Developer Console and create new project. View screen shot
- Enter desired Project Name and click "Create". Ex: Firebase Auth
- After project is created open Firebase Console . Click "Add project"
- Under "Project name" drop down select project name created earlier. View screen shot
- Click "Add Firebase". You will land on "Project Overview" page
- Click "Web" icon under "Get started by adding Firebase to your app ". View screen shot
- 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"
- 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
- While being within Project Settings > click "Service Account" tab > click "Generate new private key" > Generate Key. View screen shot
- Download the file to your PC. Rename downloaded file to: credentials.json
- Go to Admin panel of your SkaDate website > Plugins > Installed plugins > Firebase Auth > Settings.
- Add saved apiKey and authDomain into correspondin fields in "Api setup" widget
- Upload your credentials.json under "Private key file"
- Enter desired email for "Email example" field
- Check at least "Google" box under "Social networks" widget and save/submit your changes. View screen shot
- Go back to Firebase Console > Project Overview. From the left navigation menu select "Develop" and click "Authentication"
- Open "Sign-in method" tab and scroll down to "Advanced" section. Click "Change" next to "One account per email address "
- In an opened popup select "Prevent creation of multiple accounts with the same email address" option and save changes
- 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
- 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.
While in Firebase Console > Project Overview> Develop> Authentication > "Sign-in method" tab hover the mouse over "Google" provider> click pencil icon > Toogle "Enable" button
- Add desired "Project public-facing name". View screen shot
- Select "Project support email". View screen shot > save changes
- 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
- Go to your site (https://your_domain_here/sign-in) and test Google integration by registering a new account via Google button.
Facebook 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
- Copy your OAuth redirect URI and save in a text document. You will need it later. View screen shot
- 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
- 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
- Click "Add platform" located before the "Save changes" button. Select "Website" platform >> Add valid (!), actual(!) and full (!) site URL >>Save changes
- 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
- 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
- Add OAuth redirect URI copied from your Firebase project at step 2 of this guide into "Valid OAuth Redirect URIs" field. View screen shot
- Click on "OFF" sign in top navigation bar to make your app Live
- Go to Settings > Basic of your Facebook Application. Copy
- App ID
- App secret
- 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)
- 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
- Go to your site (https://your_domain_here/sign-in) and test Facebook integration by registering a new account via Facebook button.
- While in Firebase Console > Project Overview> Develop> Authentication > "Sign-in method" tab hover the mouse over "Twitter" provider> click pencil icon > Toogle "Enable" button
- Copy your callback URL and save in a text document. You will need it later
- 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
- After approval go to https://developer.twitter.com/en/apps > Create an app
- Give your application desired App name and add desired Application description
- Add your full website URL into Website URL field
- Check "Enable Sign in with Twitter" box
- Add callback URL copied from Firebase at step 2 into "Callback URLs" field
- Add Organization name and Organization website URL if applicable
- 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.
- At next step you can review submitted information and upload app icon
- Click "Permissions" tab > Edit > select "Read Only". Under "Additional permissions" check "Request email address from users" box > save changes
- Click "Keys and tokens" tab. Under "Consumer API keys" copy your API and API secret keys
- 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
- 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.
