Injecting userId and token into build

[chrmeehansr]

Hello - Not necessarily an issue with running things. It's a really great starting point to build on top of and thank you so much for sharing this.

I have an existing Stream Maker account. Long story short.. I've been building alot of my solution, which has a stream integration feature set, on c# / .net. However, I started with c# and using some of the stream maui content and after a ton of work, I realized there is just too much I'd have to write from scratch.. Not that I'm lazy, just have timelines to hit. I really like this social messenger ts base..

What I did was clone this, use my apps account creation / user sign up process which also upserts and creates a user in stream on the backend with that userid (a guid). So I have a valid Id to use and valid tokens to pass from my idp.

I can hard code the userid and tokens into .env, build and generate static files. I then wrapped it all in .net maui with a hyridwebview.. Debug my app on a physical device and navigate to the stream integration and my newly created user is connected and can use the environment (with some other things that need fixing), but awesome, that works as well.

I then wrote some js that will search all the static files created from build for the userId, 4 instances are found after the build and static files are created. This script is added to the index.html of the package.

Fresh deploy of my app to physical device, user opens and logs in and is authenticated. My idp sends back a valid token. I now navigate to the stream experience, initialize the hybridwebview, The hybridwebview passes the values of userId and valid token from c# to my js script which traverses, the directory and does a search and replace to update the values. I know there are 4 instances in the mainXXXXXXXXXX.js file, updates and then launches stream app instance in my app.

.net 9 and the social-messenger-ts here being used.

I've used this c# to js / js to c# communication in other non stream areas of app functionality passing values to hybridwebviews that have static React build files and it works.

I can't seem to get it working here though.. This piece is, for now, the last item I need to get working to move forward to the next milestone.

Wondering if anyone has any thoughts, better methods, obvious newbie issues, etc... ?? I'm happy to share and discuss in more detail. Fairly new to serious app development so be gentle, but 25+ years in the industry. If there is a better way, please let me know.

Thanks in advance for any thoughts and if you took the time to read all that! Happy coding!

-C

[oliverlaz]

hi @chrmeehansr, thanks for raising this question and using our demo app as a starting point.

Storing the credentials in the user's file system isn't something we recommend, as it can become a security issue.
From your description, I understand you've built a backend service that issues user tokens. You can use this service directly within the SDK and you won't have to do potentially dangerous find-and-replace operations in the compiled code.

• https://getstream.io/chat/docs/react/tokens_and_authentication/#how-to-refresh-expired-tokens

Essentially, you can modify this code to:

  const chatClient = useCreateChatClient<StreamChatGenerics>({
    apiKey,
    userData: userToConnect,
    tokenOrProvider: async () => {
      const token = await API.myTokenGeneratorBackendService(myUserId);
      return token;
    },
  });

myUserId can be passed down either from your main app or can be read from another service.

I hope this helps. Happy coding!