> ## Documentation Index > Fetch the complete documentation index at: https://docs.runmorph.dev/llms.txt > Use this file to discover all available pages before exploring further. # Front > Open-Source Front Connector }> The Front connector enables easy and secure data synchronization between your application and your customers' Front accounts through unified data models. ## Authorization The Front connector uses OAuth for secure authentication. When creating a connection, the required OAuth scopes are automatically configured based on your specific operations needs (e.g. `genericContact::create`, `genericUser::list`).

✓ Automatic token refresh handling
✓ Proactive insufficient permissions detection

[View our step-by-step integration guide](./../api-reference/intro) **Whitelabel** **Supported**
You can choose to provide your own set of `clientId` and `clientSecret` for this connector from the Morph Cloud dashboard; allowing a fully whitelabled experience for your end-customers. ```typescript TypeScript theme={null} import { Morph } from "@runmorph/cloud"; const morph = Morph({ publicKey: "pk_demo_xxxxxxxxxxxxxxx", secretKey: "sk_demo_xxxxxxxxxxxxxxx"}); // create a new connection const connection = morph.connections({ connectorId: "front", ownerId: "demo" }); await connection.create({ operations:[ "genericContact::list" ]}); // auhtorize the connection const { auhtorizationUrl } = await connection.authorize(); // redirect the user to the auhtorizationUrl ``` ```tsx React theme={null} import { Morph, Connect } from "@runmorph/atoms"; // generate sessionToken from server → morph.sessions().create(...); export default function ConnectionPage({ sessionToken }) { return ( alert(error.message) }} /> ); } ``` ```python Python theme={null} morph = Morph(api_key="pk_demo_xxxxxxxxxxxxxxx", api_secret="sk_demo_xxxxxxxxxxxxxxx") # create a new connection connection = morph.connections(connector_id="front", owner_id="demo") connection.create(operations=[ "genericContact::list" ]) # authorize the connection auth_result = connection.authorize() authorization_url = auth_result["authorization_url"] # redirect the user to the authorization_url ``` ```ruby Ruby theme={null} morph = Morph.new(api_key: "pk_demo_xxxxxxxxxxxxxxx", api_secret: "sk_demo_xxxxxxxxxxxxxxx") # create a new connection connection = morph.connections(connector_id: "front", owner_id: "demo") connection.create(operations: [ "genericContact::list" ]) # authorize the connection auth_result = connection.authorize authorization_url = auth_result[:authorization_url] # redirect the user to the authorization_url ``` ```php PHP theme={null} $morph = new Morph([ 'api_key' => 'pk_demo_xxxxxxxxxxxxxxx', 'api_secret' => 'sk_demo_xxxxxxxxxxxxxxx' ]); // create a new connection $connection = $morph->connections([ 'connector_id' => 'front', 'owner_id' => 'demo' ]); $connection->create(['operations' => ['genericContact::create','genericUser::list']]); // auhtorize the connection $authResult = $connection->authorize(); $authorizationUrl = $authResult['authorization_url']; // redirect the user to the auhtorizationUrl ``` ```go Go theme={null} morph := morph.New(&morph.Config{ publicKey: "pk_demo_xxxxxxxxxxxxxxx", secretKey: "sk_demo_xxxxxxxxxxxxxxx", }) // create a new connection connection := morph.Connections(&morph.ConnectionConfig{ ConnectorId: "front", OwnerId: "demo", }) connection.Create(&morph.CreateConfig{ Operations: []string{"genericContact::create", "genericUser::list"}, }) // authorize the connection authResult, _ := connection.Authorize() authorizationUrl := authResult.AuthorizationUrl // redirect the user to the authorization URL ```
**Live Demo**
Select a connector below to experience our seamless authentication flow and see how easy it is to connect third-party services.