OAuth Connect

To create a 3rd party app or plugin that can access Payload accounts, Payload.js has a Connect function to trigger an OAuth authorization flow.

Connect Flow

Step 1) Request OAuth Code on Client

Pop-up example

<script src="https://payload.co/Payload.js"></script>

<script>
// See UI Authentication on how to obtain a client key
Payload('generated_client_token')

new Payload.Connect({
    org_id: 'org_f77fqR3fH4XUP8vEmqueOGOY',
    scope: 'org'
}).on('connected', function(e) {
    $.post('/get_payload_oauth_token', {code: e.code}, function(){
        alert('Connected!')
    })
})
</script>

Redirect example

<script>
new Payload.Connect({
    org_id: 'org_f77fqR3fH4XUP8vEmqueOGOY',
    scope: 'org',
    type: 'redirect',
    redirect_uri: 'http://example.com/redirect'
})
</script>

The first step is to initiate an OAuth authorization flow to obtain an authorization code. The resulting code will then be used to gain access to one or more processing accounts of an existing Payload user.

The simplest way to initiate a request for access is to use Payload.js Payload.Connect interface. Payload.Connect accepts org_id, scope, type, and redirect_uri.

Payload.Connect Parameters

Name	Description
`org_id`	The id of your primary payload organization
`scope`	`org` or `processing`
`type`	`null` or `redirect`
`redirect_uri`	If the `type` is `redirect` you must provide a `redirect_uri`
`auth_only`	Disable the sign up option within the OAuth flow

Step 2) Get Tokens on Server

curl "https://api.payload.co/oauth/token" \
    -u secret_key_3bW9JMZtPVDOfFNzwRdfE: \
    -d code='<code retrieved from the client>' \
    -d grant_type=authorization_code \
    -d client_id='org_f77fqR3fH4XUP8vEmqueOGOY' \
    -d client_secret='secret_key_3bW9JMZtPVDOfFNzwRdfE'

oauth_token = pl.OAuthToken.create(
        code=code,
        grant_type='authorization_code',
        client_id='org_f77fqR3fH4XUP8vEmqueOGOY',
        client_secret='secret_key_3bW9JMZtPVDOfFNzwRdfE'
)

# The resulting access and refresh tokens
print(oauth_token.access_token)
print(oauth_token.refresh_token)

oauth_token = pl.create(Payload::OAuthToken.new({
  code: code,
  grant_type: 'authorization_code',
  client_id: 'org_f77fqR3fH4XUP8vEmqueOGOY',
  client_secret: 'secret_key_3bW9JMZtPVDOfFNzwRdfE'
}))

# The resulting access and refresh tokens
puts oauth_token.access_token
puts oauth_token.refresh_token

<?php
$oauthToken = pl\OAuthToken::create([
    'code' => $code,
    'grant_type' => 'authorization_code',
    'client_id' => 'org_f77fqR3fH4XUP8vEmqueOGOY',
    'client_secret' => 'secret_key_3bW9JMZtPVDOfFNzwRdfE'
]);

// The resulting access and refresh tokens
echo $oauthToken->access_token;
echo "\n";
echo $oauthToken->refresh_token;
?>

const oauthToken = pl.OAuthToken.create({
    code: code,
    grant_type: 'authorization_code',
    client_id: 'org_f77fqR3fH4XUP8vEmqueOGOY',
    client_secret: 'secret_key_3bW9JMZtPVDOfFNzwRdfE'
});

// The resulting access and refresh tokens
console.log(oauthToken.access_token);
console.log(oauthToken.refresh_token);

var token = await pl.OAuthToken.CreateAsync(new {
    code = "<code>",
    client_id = "org_f77fqR3fH4XUP8vEmqueOGOY",
    grant_type = "authorization_code",
    client_secret = "secret_key_3bW9JMZtPVDOfFNzwRdfE"
});

// The resulting access and refresh tokens
Console.WriteLine(token["access_token"]);
Console.WriteLine(token["refresh_token"]);

On the server side, you can use the oauth code returned from the client side to get the access token and refresh token.

Access tokens will only stay active temporarily, use the expires_in response value to determine how long until the token expires. To get a new token after expiration, see the next section on refreshing tokens with the refresh_token in this response.

Step 3) Refresh Access Token

curl "https://api.payload.co/oauth/token" \
    -d grant_type=refresh_token \
    -d refresh_token='<refresh token for user>'

oauth_token = pl.OAuthToken.create(
    grant_type = "refresh_token",
    refresh_token = "<refresh token for user>"
)

print(oauth_token.access_token)
print(oauth_token.refresh_token)

oauth_token = pl::OAuthToken.create(
  grant_type: 'refresh_token',
  refresh_token: '<refresh token for user>'
)

puts oauth_token.access_token
puts oauth_token.refresh_token

<?php
$oauthToken = pl\OAuthToken::create([
    'grant_type' => 'authorization_code',
    'refresh_token' => '<refresh token for user>'
]);

echo $oauthToken->access_token;
echo "\n";
echo $oauthToken->refresh_token;
?>

const oauthToken = pl.OAuthToken.create({
    grant_type: 'authorization_code',
    refresh_token: '<refresh token for user>'
});

console.log(oauthToken.access_token);
console.log(oauthToken.refresh_token);

var token = await pl.OAuthToken.CreateAsync(new {
    grant_type = "refresh_token",
    refresh_token = "<refresh token for user>"
});

// The refreshed tokens
Console.WriteLine(token["access_token"]);
Console.WriteLine(token["refresh_token"]);

To refresh an expired token, simply pass the refresh token along with a grant_type=refresh_token to the /oauth/token endpoint. This will issue a new access_token and refresh_token.