Using stack-auth components without next.js

[mikejurka]

The stack-auth docs state:

To get started with Stack, you need a Next.js project with the app router. The pages router is not supported

Is there any way to use it with a different type of React app, such as vite?

[fomalhautb]

Not currently, we are mainly focused on Next.js right now. But we will eventually support that

[ishan-sharma-me]

@fomalhautb I was able to create an interface nativeInterface.ts and ReactNative client in the stack-app.ts. was pretty fun to see everything work in react native, would love to contribute.

Also I think it would be easy to decouple the nextjs parts like I did for it to work in react native for it to work on any js environment. there it will just default to using plain cookies.

[fomalhautb]

@ishan-sharma-me Oh wow that is super cool! Do you think you can share the code?

[avarayr]

Hey @ishan-sharma-me
Super interested to see a minimal example of this.

Is there any way you could share an example repo? Something that only focuses on auth, without too many bells and whistles.

[ishan-sharma-me]

@fomalhautb hey to implement it, I needed a react native / expo app inside the stack monorepo. pnpm and turbo cause a lot of issues with react native so instead of creating a sample app inside the monorepo I instead copied over the files from stack-shared and stack packages and implemented things there. Sharing that whole repository would not be possible.

I will have to make that demo app inside the stack app and then make a PR with those changes also would need to have some changes on the server side. For example I had to remove the https:// trusted domain requirement cause native apps need custom schemes for redirection / deep linking.

It would be amazing if you could give me a freelance contract to implement it inside the stack repository (have my own startup, kind of struggling rn that is why I even asked otherwise wouldn't have) but even if not I will definitely implement it as and when I get free time and start pushing changes in a fork.

I will write down the changes I did,

Server Changes:

1. Allow custom schemes for deep linking redirection in react native. Short term solution can be to remove the https check and just check that people are not using http. Long term more secure solution can be to check if the react native app where the library is being used has that scheme and only then redirect to it.
2. React native fetch implementation does not have manual redirect option, so in some api the redirection will need to be done client side instead of server side for example the token api needs to return 200 instead of 308.
3. There are some changes in schema-fields.

Dashboard Changes

1. Allow custom schemes, remove https as the default and allow production mode even when custom schemes are added.

React Native Interface

1. Use expo fetch when running using expo.
2. crypto web api does not exist in react native so I implemented a react native low level functions which were needed for stack.
3. pkceChallenge also requires crypto web api, used a react native compatible library to generate that.

stack-app.ts

1. React native does not support react 19 and probably won't for some time so polyfilled react 19 features like use().
2. Created a new type of store called native store that stores the keys in secure storage on both android and ios instead of cookies.
3. made nextjs features specific to running on nextjs instead of everywhere
4. Created functions specific to react native whenever needed for example signInWithOAuth on react native instead of redirection opens an auth specific web browser and returns the tokens.

Redirection

1. Redirection in most client side codes right now requires window.location which is not available in react native, made that universal by using expo router.

You can mail me at [email protected].

I will add a link to my fork in this thread soon.

[ishan-sharma-me]

output.mp4

[avarayr]

output.mp4

This is very helpful. Would love to see how you implemented useStackApp that has both web and native implementations

[fomalhautb]

@ishan-sharma-me Thanks for sharing those incredibly helpful insights! I understand you can't share the code for your repo, maybe you can strip out the proprietary parts and leave a monorepo with just the stack files and a minimal React Native example. We could use that as a reference to implement React Native support ourselves.

As for contract work, it might be a bit difficult given our current stage—we don’t have the bandwidth to onboard people and manage the added complexity right now. However, I think we should still have a chat! Sent you an email.

[ishan-sharma-me]

@fomalhautb got it. received your mail. I will create a new repository and get back soon.

[fomalhautb]

#408

This will create a vanilla JS version of the stack auth client. It might not be the best suitable for RN, but it is probably useful for many people already.

[fomalhautb]

We recently added React SDK https://docs.stack-auth.com/react/getting-started/setup!

[mikejurka]

awesome!