Improve documentation to show complete example?

[jjrohrer]

I'm a seasoned PHP programmer, but fairly new to Laravel, and I started trying to implement this seemingly super cool package, but I couldn't get very far. It would be nice to have more thorough instructions for us folks newer to Laravel. Although I could follow the instructions for yarn add after switching to npm, and the instructions for updating the model/User.php, I couldn't figure out what to do after To get started, you need to have the user register a new credential. You can do so by presenting them with a modal when they login, or by adding the option to their settings page. I'm using jetstream, so I have a settings page and login page, but it is a mystery where the code-blocks should go.

So, where should I put this block (for a typical installation)?

import Cookies from 'js-cookie'
import { useRegistration } from '@web-auth/webauthn-helper'

const onClick = () => {
    const token = Cookies.get('XSRF-TOKEN')

    useRegistration({
        actionUrl: route('fastlogin.create'),
        optionsUrl: route('fastlogin.create.details'),
        actionHeader: {
            'x-xsrf-token': token
        },
    }, {
        'x-xsrf-token': token
    })().then(() => {
        // credential has been added
    })
}

And where should I put this block?

import Cookies from 'js-cookie'
import { useLogin } from '@web-auth/webauthn-helper'

const onClick = () => {
    const token = Cookies.get('XSRF-TOKEN')

    useLogin({
        actionUrl: route('fastlogin.login'),
        optionsUrl: route('fastlogin.login.details'),
        actionHeader: {
            'x-xsrf-token': token
        },
    }, {
        'x-xsrf-token': token
    })().then(() => {
        // the user has been logged in

        window.location.reload()
    })
}

I would love to see a simple tutorial, or sample git repository, of modifying a fresh jetstream install to use this package.

But this seems like a neat package my users would appreciate.

[emotality]

I'm also lost, I couldn't continue and removed this package 🙈

We are not all frontend gurus, please make it easier for backend devs 😢

[fredbradley]

So - I managed to do it yesterday with a bit of trial and error. One issue (and possibly why the maintainer has done the minimum in the way that he has) is that setup is going to be slightly different from app to app. Depending on the circumstances and setup of your current configuration. Particularly when it comes to front end systems. Vue, Inertja, React, or - as one of my older projects that I've just added this to was - jQuery! The JavaScript is all set up slightly differently .

For example - one reason I couldn't get it working was that my User Model didn't have a name attribute. Which is required for this release of this package. Once I read the whole code and understood what it was checking for, I figured this out.

More useful than a README doc outline specific things, would probably be a YouTube video explaining pieces of the code and common pitfalls.

Having said that I'm looking at adding a PR that adds a config file so that set up can be slightly easier.