# Put a Cesium Ion Access Token in React Framework

**URL:** <https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816>\
**Category:** CesiumJS\
**Created:** [August 13, 2021, 4:44am UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816 "2021-08-13T04:44:32Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![833e9af2bc9388b35b62](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/833e9af2bc9388b35b62/32/3476_2.png) [@833e9af2bc9388b35b62](https://community.cesium.com/u/833e9af2bc9388b35b62)\
**Post date:** [August 13, 2021, 4:44am UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/1 "2021-08-13T04:44:32Z")

</div>

Current i use ReactJs tu call cesium. However, i had a problem that imagery below not appear :

1. Bing Maps Aerial
2. Bing Maps Aerial with Label
3. Sentinal-2
4. Blue Marble
5. Earth at Night

this is error request:  
Resource.js:2175 GET [https://api.cesium.com/v1/assets/4/endpoint?access\_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2N2NjZjU1MS02ZDE5LTRjYzAtYjg0Zi0wODc2YjMxNGE1ZWEiLCJpZCI6MjU5LCJpYXQiOjE2MjAwNDczMDl9.159vCWIGDh0dexF393wvC4zUCbq4oZg6VkPAB5U6tg0](https://api.cesium.com/v1/assets/4/endpoint?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2N2NjZjU1MS02ZDE5LTRjYzAtYjg0Zi0wODc2YjMxNGE1ZWEiLCJpZCI6MjU5LCJpYXQiOjE2MjAwNDczMDl9.159vCWIGDh0dexF393wvC4zUCbq4oZg6VkPAB5U6tg0) 401.

I didn’t declare or put access token yet. But i try to put it, how ever i didn’t know know and where to put it…

Below is code i use…

import React, { useEffect, useRef } from ‘react’;

import { makeStyles } from ‘@material-ui/core/styles’;

import Lod from ‘./Lod’;

import { Viewer, Cesium3DTileset } from ‘cesium’;

import lod\_dat from ‘./data\_lod’;

const useStyles = makeStyles({

main: {

```
height:'100vh',

Width:'100vw',

```

}

})

const Cesium = () =\> {

```
const ref = useRef();

const classes = useStyles();

useEffect(() => {

  if (!ref.current) return;

  const viewer = new Viewer(ref.current);

  lod_dat.map((dat) => viewer.scene.primitives.add(new Cesium3DTileset({ url: dat.link })));

      

  console.log(viewer.scene.primitives);

});

return <div ref={ref} className={classes.main} />

```

}

export default Cesium;

Need help on this problem…

Thanks and appreciate…

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 13, 2021, 6:40pm UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/2 "2021-08-13T18:40:05Z")

</div>

@833e9af2bc9388b35b62

Thank you for the detailed post! The access token should go at the top of your javascript file. It should look something like

```auto
// Grant CesiumJS access to your ion assets
Cesium.Ion.defaultAccessToken = "ey........";

```

You can get your CesiumJS token by creating a Cesium ion account, logging in, and selecting the “Access Tokens” tab.

[https://cesium.com/ion/tokens](https://cesium.com/ion/tokens)

Let me know if you have any other questions or concerns!

-Sam

---

<div class="post-metadata">

**Author:** ![833e9af2bc9388b35b62](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/833e9af2bc9388b35b62/32/3476_2.png) [@833e9af2bc9388b35b62](https://community.cesium.com/u/833e9af2bc9388b35b62)\
**Post date:** [August 15, 2021, 2:53am UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/3 "2021-08-15T02:53:37Z")

</div>

> [@sam.rothstein](#):
>
> `Cesium.Ion.defaultAccessToken`

Thanks for the shared…

if i want to add token that i create, do i need to use this keyword?  
Cesium.Ion.defaultAccessToken  
or no need to put default word?

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 16, 2021, 1:26pm UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/4 "2021-08-16T13:26:54Z")

</div>

@833e9af2bc9388b35b62

You should use the keyword and syntax that I provided. `Cesium.Ion.defaultAccessToken` is correct. Let me know if you have any other questions!

-Sam

---

<div class="post-metadata">

**Author:** ![833e9af2bc9388b35b62](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/833e9af2bc9388b35b62/32/3476_2.png) [@833e9af2bc9388b35b62](https://community.cesium.com/u/833e9af2bc9388b35b62)\
**Post date:** [August 17, 2021, 9:12am UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/5 "2021-08-17T09:12:25Z")

</div>

Cesium.Ion.defaultAccessToken = process.env.REACT\_APP\_CESIUM\_ION\_TERRAIN;

I do put code above after import library and before function component.

its no define Cesium. even i was try import Cesium from ‘cesium’ & try import Cesium from ‘resium’

need your idea

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 17, 2021, 2:55pm UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/6 "2021-08-17T14:55:15Z")

</div>

@833e9af2bc9388b35b62

The following line of code does not look familiar to me in the context of resium.

`Cesium.Ion.defaultAccessToken = process.env.REACT_APP_CESIUM_ION_TERRAIN;`

However, it is difficult for me to diagnose exactly what is going wrong without seeing the rest of your codebase. Could you possibly share your repository with the rest of the community? Sharing the exact error that you are receiving would also be helpful.

One great first step would be to work through the “Getting Started” guide on resium’s website.

> **[Getting Started](https://resium.darwineducation.com/getting_started/)**
>
> React component library for Cesium

This guide will help you build a base application, which should address the issue that you are having with `Cesium.Ion.defaultAccessToken`.

Admittedly, my experience with resium is limited. If you still are having trouble after going through the “Getting Started” guide, addressing the issue with the resium developers might help expedite your progress.

> **[GitHub - reearth/resium: React components for 🌏 Cesium](https://github.com/reearth/resium)**
>
> React components for 🌏 Cesium. Contribute to reearth/resium development by creating an account on GitHub.

**Do other community members have any suggestions?**

-Sam

---

<div class="post-metadata">

**Author:** ![romza](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/romza/32/3476_2.png) [@romza](https://community.cesium.com/u/romza)\
**Post date:** [April 21, 2022, 12:59pm UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/7 "2022-04-21T12:59:01Z")

</div>

I have the same problem, no idea how to add the AccessToken to Resium. Did you find a solution ? I don’t think it’s mention anywhere in the Resium documentation.

---

<div class="post-metadata">

**Author:** ![romza](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/romza/32/3476_2.png) [@romza](https://community.cesium.com/u/romza)\
**Post date:** [April 21, 2022, 2:31pm UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/8 "2022-04-21T14:31:44Z")

</div>

fond it. :

```auto
import { Ion } from "cesium";
Ion.defaultAccessToken = "YOUR_ACCESS_TOKEN";

```

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [April 22, 2022, 9:24pm UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/9 "2022-04-22T21:24:44Z")

</div>

Hi @romza,

Thank you for posting an update! Happy we were able to work this out.

-Sam

---

<div class="post-metadata">

**Author:** ![romza](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/romza/32/3476_2.png) [@romza](https://community.cesium.com/u/romza)\
**Post date:** [April 23, 2022, 9:59am UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/10 "2022-04-23T09:59:44Z")

</div>

Hi @sam.rothstein,  
You’re welcome.  
It’s working, but kind of not totally.  
It let me access my ion asset, but the cesium player still show the : `" **This application is using Cesium's default ion access token. Please assign *Cesium.Ion.defaultAccessToken* with an access token from your ion account before making any Cesium API calls. You can sign up for a free ion account a**"`

Do you have an idea what can be done about it ?  
Thanks !

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [April 29, 2022, 12:53am UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/11 "2022-04-29T00:53:12Z")

</div>

Hi @romza,

That’s interesting. Are you certain that you are _only_ using the default access token that is associated with your personal Cesium ion account?

-Sam

---

<div class="post-metadata">

**Author:** ![romza](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/romza/32/3476_2.png) [@romza](https://community.cesium.com/u/romza)\
**Post date:** [May 2, 2022, 9:34am UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/12 "2022-05-02T09:34:26Z")

</div>

Hi Sam,  
I was not, but I’m now, and it’s still the same.

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [May 9, 2022, 6:55pm UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/13 "2022-05-09T18:55:35Z")

</div>

Hi @romza,

Understood - are you having trouble accessing certain assets?

-Sam

---

<div class="post-metadata">

**Author:** ![romza](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/romza/32/3476_2.png) [@romza](https://community.cesium.com/u/romza)\
**Post date:** [May 9, 2022, 8:23pm UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/14 "2022-05-09T20:23:02Z")

</div>

No, no trouble at all, I can access them. It’s not a big issue.

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [May 9, 2022, 9:23pm UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/15 "2022-05-09T21:23:57Z")

</div>

Hi @romza,

So what exactly is the issue?

-Sam

---

<div class="post-metadata">

**Author:** ![romza](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/romza/32/3476_2.png) [@romza](https://community.cesium.com/u/romza)\
**Post date:** [May 10, 2022, 12:48pm UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/16 "2022-05-10T12:48:35Z")

</div>

Just the line saying “This application is using Cesium’s default ion access token etc” on the player, but that’s not that important, it’s only a cosmetic issue, not a functional one.

---

<div class="post-metadata">

**Author:** ![salah.elfarissi](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/salah.elfarissi/32/10869_2.png) [@salah.elfarissi](https://community.cesium.com/u/salah.elfarissi)\
**Post date:** [September 6, 2022, 3:17pm UTC](https://community.cesium.com/t/put-a-cesium-ion-access-token-in-react-framework/14816/17 "2022-09-06T15:17:13Z")

</div>

I have the same issue.