The example below describes the steps for implementing social login with Facebook, using only Frontegg APIs. The same method can be used to implement - Microsoft, Google, Linkedin, GitHub logins.
**All examples in this guide use https://acme.com as Application URL. Your `[frontegg-sub-domain]` can be found under the Environment > Settings > Domains > Frontegg domain.
1. Create a custom application on Facebook https://developers.facebook.com/
2. Send the below payload to POST with your Frontegg vendor token and the secret and client id you got for your FB app `https://api.frontegg.com/identity/resources/sso/v2`
For `redirectUrl` and `redirectUrlPattern` use `your-application-url/account/social/success`
Or use the Frontegg portal UI to configure it on Frontegg side:
See a configuration object example below:
{
"type": "facebook",
"active": true,
"customised": true,
"clientId": "xxxxxx",
"redirectUrl": "https://acme.com/account/social/success",
"redirectUrlPattern": "https://acme.com/account/social/success",
"authorizationUrl": null,
"secret": "xxxxxx"
}
3. On client GET `https://[your-frontegg-domain]/frontegg/identity/resources/sso/v2`.
4.
4. When clicking on Social Login (FB) button call a similar function to generate a redirect URL: useRedirectUrl(createFacebookUrl, 'facebook'):
const createFacebookUrl = ({ clientId, redirectUrl, state }: UrlCreatorConfigType): string => {
const searchParams: URLSearchParams = new URLSearchParams({
scope: 'email',
redirect_uri: redirectUrl,
response_type: 'code',
state,
});
if (clientId) {
searchParams.set('client_id', clientId);
}
// Additional social provider URLs are listed at the bottom
const url: URL = new URL('https://www.facebook.com/v10.0/dialog/oauth');
url.search = searchParams.toString();
return url.toString();
};
export const useRedirectUrl = (
urlCreator: (config: UrlCreatorConfigType) => string,
socialLoginType: SocialLoginProviders,
): string | null => {
const action = 'LOGIN' | 'SIGNUP'
const { socialLoginsConfigV2 } = useSocialLoginState(({ socialLoginsConfigV2 }) => ({ socialLoginsConfigV2 }));
const config: ISocialLoginProviderConfigurationV2 | undefined = useMemo(
() => socialLoginsConfigV2?.find(({ type }) => type.toLowerCase() === socialLoginType.toLowerCase()),
[socialLoginsConfigV2, socialLoginType],
);
const redirectUri = 'YOUR-REDIRECT-URI'
const redirectUrl: string | undefined = useMemo(() => {
if (config) {
if (config.customised) {
return urlCreator({
...config,
redirectUrl: redirectUri,
state: createSocialLoginState({ provider: socialLoginType, action }),
});
} else {
return `${config.authorizationUrl}${window.location.search}` ?? undefined;
}
}
}, [config, redirectUri, socialLoginType, action, urlCreator]);
if (!config?.active || !redirectUrl) {
return null;
}
return redirectUrl;
};
5. The generated Facebook redirect Url should look like below:
https://www.facebook.com/v10.0/dialog/oauth?scope=email&redirect_uri=https://[your-frontegg-domain]/oauth/account/social/success&response_type=code&state={"provider":"facebook","action":"login"}&client_id=602947478169832
6. After logging in with Facebook, it will redirect the user back to `/account/social/success` route with code and state.
https://acme.com/account/social/success?code=AQC43JJEqCh7AarhWAiCnmYYzkD_ET_NbcGNTZqueUe6_DASgP0s-Cbz9e1204yWxtjbpQgO4jZ8zrk75gsGcelBNV4mKGsaB3NEnIPoJ1JJZnr4xM6dxoMmPKT2r3biuPbSaw0WZZ7ITrnX-a_pnSBLQkXaH7zRgu7f5cfT7fDygqllJpu-vyVRb-ytYg4U_z4eHP09YCx8s4RFkGbU21GoAL_b39rzVqiJ5KkmxDXzUTBBPLgXHNp1RR2IJRuLOA9K2UuIwlZHJkIIshjLdOmDGV05THgMGMldL8PKMTUwp1klWzMfghOGp01XrFFO8sTnIcd9v7lTZKIVRSSCJp4o3K9iybSUdagfJEQ1jZnujkHQpK4WA_55wb8QY8Ox-R9e-s5vMR1fPEVqMSPCfOHDhCtYMzFGSI0KZts5TqXUghEE5O7uuSThhbc3h5EvrWU&state=eyJzZXNzaW9uSWQiOiJmNzc5Y2MwOC1mOGNmLTQ5OWUtOTcyNS1kY2I1MmJmNGQxMTciLCJieXRlcyI6ImVNbFhIRHZUYXJwZzUzLThTc29nM203eUNSanpQV3M2U25zZXBMSEcxVW8iLCJ2ZW5kb3JJZCI6IjY4MTZmM2M4LTJkMzktNGE3MS1iMmFkLWI5NWNjY2I5NDQzMCJ9&customised=false&provider=facebook/postlogin?code=AQC43JJEqCh7AarhWAiCnmYYzkD_ET_NbcGNTZqueUe6_DASgP0s-Cbz9e1204yWxtjbpQgO4jZ8zrk75gsGcelBNV4mKGsaB3NEnIPoJ1JJZnr4xM6dxoMmPKT2r3biuPbSaw0WZZ7ITrnX-a_pnSBLQkXaH7zRgu7f5cfT7fDygqllJpu-vyVRb-ytYg4U_z4eHP09YCx8s4RFkGbU21GoAL_b39rzVqiJ5KkmxDXzUTBBPLgXHNp1RR2IJRuLOA9K2UuIwlZHJkIIshjLdOmDGV05THgMGMldL8PKMTUwp1klWzMfghOGp01XrFFO8sTnIcd9v7lTZKIVRSSCJp4o3K9iybSUdagfJEQ1jZnujkHQpK4WA_55wb8QY8Ox-R9e-s5vMR1fPEVqMSPCfOHDhCtYMzFGSI0KZts5TqXUghEE5O7uuSThhbc3h5EvrWU&state=eyJzZXNzaW9uSWQiOiJmNzc5Y2MwOC1mOGNmLTQ5OWUtOTcyNS1kY2I1MmJmNGQxMTciLCJieXRlcyI6ImVNbFhIRHZUYXJwZzUzLThTc29nM203eUNSanpQV3M2U25zZXBMSEcxVW8iLCJ2ZW5kb3JJZCI6IjY4MTZmM2M4LTJkMzktNGE3MS1iMmFkLWI5NWNjY2I5NDQzMCJ9
7. Trigger a POST request to `https://[your-frontegg-domain]frontegg/identity/resources/auth/v1/user/sso/facebook/postlogin` with the code and state that were received in the previous request. Below is an example of a full URL:
https://[your-frontegg-domain]/frontegg/identity/resources/auth/v1/user/sso/facebook/postlogin?code=4/0ARtbsJpI119VwifLvGJNc2yha2YaCF5xjpd_3cTHh9LYL2j1RyDvO8sBks0NcZ0gxIcXPw&state=eyJzZXNzaW9uSWQiOiJiNWQ5YmYwYS02NjJjLTQxMWQtYjg4Yi03ZTI4ZDU5NzU1Y2IiLCJieXRlcyI6Ik1haGhHZXY0SXpFRUVJMG5hWDVNbkljV1p5LTZIcS05cnVmY05WUzhaalEiLCJ2ZW5kb3JJZCI6ImVmZTEyOTliLTlhM2EtNDM2YS04OTk5LTJkNjkxOWY0MGI0MSJ9&redirectUri=[RedirectUri]
8. The `/postlogin` route will return the user's details, access token and refresh token:
{
"email": "test@frontegg.com",
"isNewUser": false,
"mfaRequired": false,
"accessToken": "xxxx",
"tokenType": "bearer",
"refreshToken": "xxxx",
"expiresIn": number,
"expires": "date",
"userId": "xxxx",
"name": "Frontegg Test",
"tenantId": "xxxx"
}
9. Refresh the user's JWT via `/refresh` route:
curl --location --request POST 'https://[your-frontegg-domain]/identity/resources/auth/v2/user/token/refresh' \
--header 'Cookie: fe_refresh_[client-id]=refresh-token' \
--header 'Authorization: Bearer [User-JWT]' \
--data-raw ''
The client-id format should be {12}-{4}-{4}-{12}
**The `/postlogin` route above accepts also:
`invitationToken`- passed in the request body for adding a user to a specific tenant in Frontegg:
{"invitationToken":"xxxxxxxxxx"}
For other types of logins, replace the 'facebook' in Frontegg routes and the `state` with the chosen social provider, i.e. `https://[your-frontegg-domain]/frontegg/identity/resources/auth/v1/user/sso/google/postlogin`
Google - "https://accounts.google.com/o/oauth2/v2/auth"
GitHub - "https://github.com/login/oauth/authorize"
Microsoft - "https://login.microsoftonline.com/common/oauth2/v2.0/authorize"
Linkedin - "https://www.linkedin.com/oauth/v2/authorization"