Greetings,

Hope everyone is doing well! 

Due to the Eid holiday, our team members will be unavailable from 17th June 2024 to  23rd June 2024. During this time we will be unable to provide replies to any support-related queries. We will get back to you on 24th June 2024.

In the meantime, we appreciate your patience. 

Wishing you a Very Happy Eid holiday. 
Stay blessed & safe.

Thanks
Redq, Inc

Okay
  Print

How Social Login Work?

The necessary direction below will help you to integrate custom social providers as well.

How Social Login Works at Pickbazar Laravel

For Social site authentication, we are using NextAuth https://next-auth.js.org/ for the client site shop (in the nextjs app) and  Laravel Socialite https://laravel.com/docs/8.x/socialite for the API server. 

The Social Login flow here is 

i) NextAuth will get the access token from the provider
ii) we will send a request to the API server with the access token
iii) API server will verify the access token using Laravel Socialite
iv) If verified then the user will be logged in.


So, the question: how can I organize the oAuth for these providers?

=> To organize provider you need to check the documentation of NextAuth from here https://next-auth.js.org/configuration/providers/oauth#built-in-providers and Laravel Socialite https://laravel.com/docs/8.x/socialite


I see i have a built-in Google/Facebook provider, but for Google, the process of creation of the oAuth creds is very complex. Maybe you have some kind of explanation/article/best practices on how to connect different providers? 

=> For starters, you can check our documentation for social login from here https://pickbazar-doc.vercel.app/social-login. We have tried to show step by step procedure. If you want more explanation or best practices you can always check the NextAuth and Socialite documentation. For example for Google, NextAuth documentation has all the necessary information for documentation and configuration in here https://next-auth.js.org/providers/google


1) When the oAuth provider redirects the user back to the pick Bazar website, should it first go to the /social-login-token Laravel's serverside method? Or it first goes to some part of the next.js app ...

=> As mentioned in the Social login flow above, yes it will send the access token with /social-login-token request so that Laravel socialite can verify that. Once it's verified it will let the user logged in.

2) Where the accessToken usually stores by design of the Pick Bazar? Serverside/Database/Redis? Or the next js app? 

=> The accessToken is stored on session using NextAuth. You can check it from src/pages/api/auth/[...nextauth].ts file under the callback jwt and session function and to access the data from the session using the below code

import { useSession } from 'next-auth/client';
const [session, loading] = useSession();

3) I implemented the oAuth flow for vk.com provider, and it seems to be partially working....

=> To Implement vk.com, you need to check the vk.com docs for nextauth from here https://next-auth.js.org/providers/vk along with laravel socialite documentation for vk. Make sure to add necessary config similar to the one mentioned in our docs here https://pickbazar-doc.vercel.app/social-login

In the API related part you do need to make some changes in the src/Http/Controllers/UserController.php file validateProvider function you need to add the provider name 

you need to check here if you are getting the accessToken in the social login function of UserController.php file and if it returns the user. If not then you need to go to the src/pages/api/auth/[...nextauth].ts file and check if you are getting the accessToken there.


Hope this information will help you to work with our social login feature

Thanks