
CARTO for React
Build compelling spatial apps using CARTO, React and deck.gl.
Auth
Package | Version | Downloads |
---|---|---|
@carto/react-auth | |
|
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.