To integrate Facebook & Google Login/Register popup on your website, follow the steps below:
Javascript Package
Add the popup script file from the source https://swayauth.com/swayauth.js this attaches a swayauthInitialize global function on the window object for initialising the authentication pop window on your web application.
Initialisation
The script file needs to be loaded before initialisation of the window function swayauthInitialize .
The loaded script only handles the communication between default Swayauth authentication url and your web application without leaving the page.
The window function swayauthInitialize takes three parameters:
1. url: the default Swayauth authentication url which are:
a. https://api.swayauth.com/v1/auth/google for Google authentication
b. https://api.swayauth.com/v1/auth/facebook for Facebook authentication
Attach your <client_id>, which is your organisation token id, generated from the Swayauth dashboard, as the URL parameter to any of the link above to identify your application ie. https://api.swayauth.com/v1/auth/google?client_id=65da91b31c1f6515540001e1
NOTE: to use popups, omit redirect url while creating an organisation token on the Swayauth dashboard, and specify your web application url origins ie. http://localhost:3000, https:example.com
2. GOOGLE-BUTTON-ID: a clickable button id on your web application to popup the modal.
3. Callback function: a callback function that returns the data needed for web application authentication: sample below
{
status: true,
message: 'OK',
data: {
intent: 'login',
status: 'true',
message: 'OK',
access_token: 'uibeonedneodnendoineoe...',
refresh_token: 'buedieoebebboebbeoibo...'
}
}
access_token, refresh_token are decodable jwt token.
Nextsj Example
<Script
strategy="lazyOnload"
onLoad={() => {
try {
const url = "https://api.swayauth.com/v1/auth/google?client_id=65da91b31c1f6515540001e1"
window.swayauthInitialize(url, 'GOOGLE-BUTTON-ID', (data) => {
console.log(data);
// {
// status: true,
// message: 'OK',
// data: {
// intent: 'login',
// status: 'true',
// message: 'OK',
// access_token: 'uibeonedneodnendoineoe...',
// refresh_token: 'buedieoebebboebbeoibo...'
// }
// }
})
} catch (error: any) { }
}}
src="https://swayauth.com/swayauth.js" />
ReactJS Example
Ignore the typescript if you are using pure JS.
declare global {
interface Window {
swayauthInitialize: any
}
}
export default function Login() {
useEffect(() => {
if (window && document) {
const script = document.createElement('script')
const body = document.getElementsByTagName('body')[0]
script.src = 'https://swayauth.com/swayauth.js'
body.appendChild(script)
script.addEventListener('load', () => {
try {
const url = "https://api.swayauth.com/v1/auth/google?client_id=65da91b31c1f6515540001e1"
window.swayauthInitialize(url, 'GOOGLE-BUTTON-ID', (data) => {
console.log(data);
// {
// status: true,
// message: 'OK',
// data: {
// intent: 'login',
// status: 'true',
// message: 'OK',
// access_token: 'uibeonedneodnendoineoe...',
// refresh_token: 'buedieoebebboebbeoibo...'
// }
// }
})
} catch (error: any) { }
})
}
}, [])
return <div><button id='GOOGLE-BUTTON-ID'>Google Login</button></div>
}