Server-side Redirects

Overview

This guide walks through implementing social login using server-side redirects with the Median JavaScript Bridge. This approach is ideal when you want to handle authentication through your backend API, keeping token validation and session management secure on your server.

Before you start

You'll need:

A backend API endpoint that can receive GET requests with tokens and session details as URL parameters
The ability to parse JWT tokens on your server to extract user details
Your server configured to create login sessions for authenticated users
Your social login providers are already configured (Facebook, Google, and/or Apple)

Understanding the parameters

Each social login method accepts these parameters:

redirectUri (required) - Your backend API endpoint URL. After login completes, the webview redirects here with the authentication token added as a URL parameter.
scope (optional) - Defines what user data your app can access. Each provider has different scope options:
Facebook scope documentation
Google scope documentation
Apple scope documentation

state (optional) - An optional string you supply to verify the request came from your app. We'll pass this back to you unchanged. Use it to prevent CSRF attacks.

Here's the basic syntax for each provider:

median.socialLogin.facebook.login({ 
  'redirectUri' : '<endpoint>', 
  'scope' : '<text>', 
  'state' : '<text>' 
});
median.socialLogin.google.login({ 
  'redirectUri' : '<endpoint>', 
  'state' : '<text>' 
});
median.socialLogin.apple.login({ 
  'redirectUri' : '<endpoint>', 
  'scope' : '<text>', 
  'state' : '<text>' 
});

What you'll receive

When login succeeds, your redirectUri receives the authentication tokens as URL parameters. If the user cancels the login process, the error parameter will contain an error message.

Redirect URL API endpoint parameters

Identity Provider	Status	Parameters	Example
Facebook Login	Success	`accessToken=STRING`² `type=facebook` `state=STRING`	https://yoursite.com/auth/facebook/redirect?accessToken=example&type=facebook&userId=1234567890&state=example
Facebook Login	Error	`error=STRING` `type=facebook`	https://yoursite.com/auth/facebook/redirect?error=error&type=facebook
Google Sign-in	Success	`idToken=STRING` `type=google` `state=STRING`	https://yoursite.com/auth/google/redirct?idToken=example&type=google&state=example
Google Sign-in	Error	`error=STRING` `type=google`	https://yoursite.com/auth/google/redirect?error=error&type=google
Sign in with Apple	Success	`idToken=STRING` `code=STRING` `firstName=STRING`¹ `lastName=STRING`¹ `type=apple` `state=STRING`	https://yoursite.com/auth/apple/redirect?idToken=example&code=example&firstName=John&lastName=Doe&type=apple&state=example
Sign in with Apple	Error	`error=STRING` `type=apple`	https://yoursite.com/auth/apple/redirect?error=error&type=apple

Platform-specific requirements

Apple only sends complete user profile data (firstName, lastName, email) on the first login. After that, you only get a JWT token and a user identifier.

Here's what to do:

Save the full user profile to your database during the first authentication
On subsequent logins, retrieve the stored profile using the user identifier from the JWT
Parse the JWT for additional fields like email and email_verified

Read Apple's documentation on retrieving user information

Implementation

Use the Median JavaScript Bridge methods to trigger native login from your website. When a user clicks the button, the native login flow starts. After they authenticate, the webview redirects to your endpoint with the authentication token as a URL parameter.

Here are examples for each platform:

Add the login button

<button class="google-login native-only" 
  onclick="median.socialLogin.google.login({ 
    'redirectUri' : 'https://your-domain.com/auth/google/callback', // Your API endpoint
    'state' : 'xyz123' // Optional security token
  });">
	Log in with Google
</button>

median.socialLogin.facebook.login({ 
  'redirectUri' : 'https://your-domain.com/auth/facebook/callback',
  'scope' : 'public_profile,email', // Request profile and email access
  'state' : 'xyz123'
});

median.socialLogin.apple.login({ 
  'redirectUri' : 'https://your-domain.com/auth/apple/callback',
  'scope' : 'name email', // Request name and email
  'state' : 'xyz123'
});

Configure your backend

Your backend server must be configured to accept the authentication token, parse it as a JWT to access the user details, and create a login session for the user.