There are 2 social logins available


  1. Facebook
  2. Google Account (Gmail)


In this article we will explain how to configure Social Login for our domain: https://listivotheme.com/


1. Facebook


1. We visit https://developers.facebook.com/apps/ 


2. Click “Create App


2. Fill App details - App name and Ap cotnact email and click "Next"


3. In the next step "use cases" chose "Filter by: All" and select: "Select “Authenticate and request data from users with Facebook Login" and click Nextnd request data from users with Facebook Logi

4. In business you can select:  "I don’t want to connect a business portfolio yet." or Buisness if you have already created one. It is up to you.



5. Requireiements


6. In overview step just click "Go to dashboard" button


7. You have been redirected to the dashboard. Select “App customization and requirements”.


8. Next, in the “Permissions and Features” panel, add the “email”.



9. Go to the “Settings” tab and add the Valid OAuth Redirect URIs – in the next step, you will find out where to get this address from.



10. Copy your OAuth Redirect URI from Listivo Panel > User Panel


11. Go to “Quickstart” and select the “Web” platform.


10. Add your domain in the “Site URL” field and click “Save”.



11. Go to “App Settings” → “Basic”.





12. Fill in the missing information to ensure the app works properly – Privacy Policy URL, Terms of Service URL, User Data Deletion instructions, App Icon, and Category.



13. Copy the App ID and App Secret – first click “Show” – and paste these values into the Listivo Panel / User Panel / Social Authorization.




14. For the app to work correctly, you must complete all required verifications listed under “Review” / “App Review”. You may be required to complete Business Verification – if necessary, it will be indicated in this section (in our case, verification is already marked as completed). Start by answering the questions related to data handling.



15. Next, provide reviewer instructions.


16.  In the next step, answer the questions related to the permissions marked in green: “How will this app use email?” and “How will this app use public_profile?”.


17. Once you’ve completed all the required steps, the “Submit for Review” button will become active. You can then click it to send your app for review.


14. Go to the “Publish” section and then click “Publish” in the bottom-right corner. After publishing, you will receive a message confirming that the app was published.





Now the Facebook login should be available on your website. 




2. Google Account (Gmail)


1. Visit: https://console.developers.google.com/ 


2. Click "Create project" button


3. Enter a new project name


4.  Visit – https://console.developers.google.com/ and Create Credentials “0Auth client ID

 

5. If you do not have product name yet, you will need to click “Configure Consent Screen”. If you have it already please skip this step.


5.1. Select User Type: External


5.2. Add “App name” and “User support email”


5.3. Add authorized domain and Developer Contact Information and then click “Save and Continue” 


5.4. Scopes – just click “Save and Continue”


5.5. Test Users – just click “Save and Continue”


5.6. In the last step just click “Back to Dashboard”


6. Visit – https://console.developers.google.com/ and Create Credentials “0Auth client ID” 



7. Select Web application



8. Now it is the most important part of configuration. You need to add Callback URL to “Authorized redirect URLs”. You can find it in your Listivo Panel and copy / paste: 



9. Because it is the most important step, before you click “Create”, please make sure:


1) you added link to “Authorized redirect URIs” section (NOT to “Authorized JavaScript origins” section)


2) you copied from Listivo Panel “Google” link NOT Facebookhttps://domain.com/social-auth/google/


3) When you are sure about it, click “Create” button


10 . Copy Your Client ID and Your Client Secret into Listivo Panel


Please make sure you checked “Enable Google Auth” Checkbox


Done!