CARTO for React

CARTO for React

Build compelling spatial apps using CARTO, React and deck.gl.

Github Code

Auth

Package Version Downloads
@carto/react-auth version downloads

OAuth utilities

Components

OAuthCallback

React component to attend OAuth callbacks on /oauthCallback. Ensure you include that specific route in your application.

  • Example:

    1
2
3
4
5
6
7

    import { OAuthCallback } from "@carto/react-auth";

// inside the proper routing config...
const routes = [
  /* ...some other routes and */
  { path: "/oauthCallback", element: <OAuthCallback /> },
];

Functions

useOAuthLogin

Hook to perform login against CARTO, with OAuth implicit flow and using a popup.

  • Input:

    Param Type Description
    oauthApp Object OAuth parameters
    oauthApp.clientId string Application client ID
    oauthApp.scopes Array.<string> Scopes to request
    oauthApp.authorizeEndPoint string Authorization endpoint
    onParamsRefreshed function Function to call when params are refreshed

  • Returns: function - A function to trigger oauth with a popup

  • Example:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

    import { useOAuthLogin } from "@carto/react-auth";

const oauthApp = {
  clientId: "YOUR_OAUTH_CLIENT_ID",
  scopes: ["user:profile"],
  authorizeEndPoint: "https://carto.com/oauth2/authorize",
};

const onParamsRefreshed = (oauthParams) => {
  if (oauthParams.error) {
    console.error(`OAuth error: ${oauthParams.error}`);
  } else {
    console.log(oauthParams);
  }
};

const [handleLogin] = useOAuthLogin(oauthApp, onParamsRefreshed);
// handleLogin function should be later handled from UI to trigger the flow

    Tip: Check CARTO for React templates for examples using this hook, where oauthApp data is managed within Redux store. For example, this is the Login page.