Wasp•6d ago

🚀 EXPO + WASP: Help integrating mobile frontend with backend authentication! 🔐

Hello world! I would like to develop a mobile frontend with EXPO and integrate it with the backend written with WASP. However, I have no idea how to use the authentication part (email and social) of WASP. Does anyone have any advice/guides on how I could proceed? Thank you!

3 Replies

kapa.ai•6d ago

Hi @mario.p. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Currently, Wasp doesn't provide first-class support for mobile clients like it does for web applications with React. However, there are some approaches you could try to integrate your Expo mobile frontend with a Wasp backend. Based on the knowledge sources, here's what we know about using Wasp authentication with mobile apps: 1. Current limitations: Wasp doesn't yet expose a public API specifically for authenticating users from external clients like mobile apps. The authentication system is primarily designed for the web client that Wasp generates Discord support thread. 2. Possible workaround: Some community members have experimented with manually connecting to Wasp's authentication endpoints. One approach is to replicate the functionality in the generated .wasp/out/web-app/src/api.js file for storing auth tokens and making authenticated requests Github Issue #1088. 3. Basic approach: For login, you could make a POST request to /auth/login with the payload {username, password}, similar to what happens in the generated .wasp/out/web-app/src/auth/login.js file. Here's a simplified example of how you might implement authentication in an Expo app (based on community experiments):

const onSubmitHandler = () => {
    const payload = { username: '[email protected]', password: '########' };
    fetch(`<http://your-wasp-backend-url/auth/login`,> {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
    })
    .then(async res => { 
        console.log('res', res.status);
        // Store the auth token from response
    })
    .catch(err => {
        console.log(err);
    });
};

const onSubmitHandler = () => {
    const payload = { username: '[email protected]', password: '########' };
    fetch(`<http://your-wasp-backend-url/auth/login`,> {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
    })
    .then(async res => { 
        console.log('res', res.status);
        // Store the auth token from response
    })
    .catch(err => {
        console.log(err);
    });
};

Some additional considerations: - This is not an officially supported use case yet, so you might encounter challenges. - You'll need to handle token storage and management on the mobile side. - For social authentication methods like Google or GitHub, the integration would be more complex. The Wasp team has mentioned that better support for mobile clients is on their roadmap, with potential exploration of React Native and Expo integration Github Issue #1088. Another alternative mentioned in the Discord thread was using a WebView in your mobile app that opens the Wasp web app's login/signup pages, though this approach has its own challenges. If authentication is critical for your app and you need a more straightforward solution immediately, you might want to consider using a service like Firebase Authentication for your mobile app, which has direct Unity integration packages available. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @mario.p, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Vinny (@Wasp)•5d ago

One of our engineers @miho built this demo https://github.com/wasp-lang/wasp-expo-app hopefully it will answer your questions. If not, feel free to ask about it.

GitHub

GitHub - wasp-lang/wasp-expo-app: Example of using Wasp's auth and ...

Example of using Wasp's auth and API in an Expo mobile app - wasp-lang/wasp-expo-app

mario.pOP•5d ago

Thanks @Vinny (@Wasp) , it is perfect! Thanks @miho for this contribute

Gaming

Programming

🚀 EXPO + WASP: Help integrating mobile frontend with backend authentication! 🔐

Did you find this page helpful?